在文本输入中实现提示

我有一个带有一些文本输入的表单：登录名，密码。在文本输入中实现提示

如果用户第一次看到这个表单，输入文本应该“包含”提示，如“输入登录名”，“输入密码”。

如果用户点击文本输入，它的提示应该消失以允许输入。

我已经看到了各种例子，它使用背景图像与预渲染文本。

这些图像出现在用下面的jQuery：

$("form > :text").focus(function(){ 
    // hide image 
}).blur(function(){ 
    // show image, if text-input is still empty 
    if ($(this).val() == "") 
     // show image with prompt 
});

这种方法有以下问题：

本地化是不可能
需要预渲染各种文字提示图片
带有加载图像的开销

你如何克服这样的问题？

来源

2010-06-16 AntonAL

这通常称为“占位符”，并且现在可以在多个浏览器中运行。

退房A Form of Madness: Placeholder Text：

<form> 
    <input name="q" placeholder="Search Bookmarks and History"> 
    <input type="submit" value="Search"> 
</form>

而对于那些不支持它的浏览器，这里将使用该文本来模拟相同的效果一个JavaScript（jQuery的）垫片：jquery-html5-placeholder-shim。如果您添加了Shim的引用，只需将它添加到您的JavaScript中即可。

$(function(){ 
    $.placeholder.shim(); 
});

至于本土化的问题，只要你与placeholder内正确的信息生成HTML属性，你应该罚款。

来源

2010-06-16 22:21:43 artlung

你为什么要简化，只是尤斯是这样的：

<input type="text" name="username" value="Your User Name" onfocus="if (this.value=='Your User Name') this.value = ''">

如果用户焦点放在上一个输入，它会删除默认的文字，让写一些新鲜的:)

来源

2010-06-16 22:04:27 Zuul

因为Zuul可以提交.value，并且可能会绕过表单完成规则和要求，而用户不需要输入任何内容。占位符是一个较为柔和的值，如果用户未将其聚焦，表单将不会将其识别为实际值。

一个简单的解决方案，结合了你的答案，更直接地解决了提问者的问题可能是这样的：如果取消无输入时选择/重点领域

这将清除占位符文本，并返回占位符文本目前在该领域取消时：

<input type="text" placeholder="1866" onFocus="if (this.placeholder=='1866') this.placeholder = ''" onBlur="if (placeholder=='') this.placeholder='1866'">

这将清除占位符文本，只有当该领域的用户类型，但在此之前：

<input type="text" placeholder="1492">

这个版本不需要额外的工作如预期。

干杯。

来源

2013-07-23 02:06:50 Kreidol

在文本输入中实现提示

回答

相关问题