HTML5在 input
元素上引入了 placeholder
属性,允许显示灰色的默认文本 .
可悲的是,包括IE 9在内的Internet Explorer不支持它 .
那里已经有一些占位符模拟器脚本了 . 它们通常通过将默认文本放入输入字段,给它一个灰色并在您聚焦输入字段后再次将其删除来工作 .
这种方法的缺点是占位符文本在输入字段中 . 从而:
-
脚本无法轻松检查输入字段是否为空
-
服务器端处理必须检查默认值,以便不将占位符插入数据库 .
我想有一个解决方案,其中占位符文本不在输入本身 .
17 回答
我找到了一个使用这种方法的简单解决方案:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
这是一个jquery hack,它在我的项目上完美运行
您可以使用 :
很简单:
我写了一个jquery插件来解决这个问题..它是免费的..
JQuery目录:
http://plugins.jquery.com/project/kegles-jquery-placeholder
网站:www.kegles.com.br/jquery-placeholder/
在查看HTML5 Cross Browser Polyfills的"Web Forms : input placeholder"部分时,我看到的是jQuery-html5-placeholder .
我用IE9尝试了demo,它看起来像是用一个span包装你的
<input>
并用占位符文本覆盖一个标签 .那里还有其他垫片,但我没有看到它们 . 其中一个,Placeholders.js,宣传自己为"No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)."
Edit: 对于那些对"what"感兴趣的人"what",How to create an advanced HTML5 placeholder polyfill,它会介绍创建一个执行此操作的jQuery插件的过程 .
另外,请参阅keep placeholder on focus in IE10,了解占位符文本如何在IE10焦点上消失,这与Firefox和Chrome不同 . 不确定是否有解决此问题的方法 .
根据我的经验,最好的一个是https://github.com/mathiasbynens/jquery-placeholder(由html5please.com推荐) . http://afarkas.github.com/webshim/demos/index.html在其更广泛的polyfills库中也有很好的解决方案 .
使用jQuery实现,您可以在提交时轻松删除默认值 . 以下是一个例子:
我知道你正在寻找叠加层,但你可能更喜欢这条路线的易用性(现在知道我上面写的内容) . 如果是这样,那么我为自己的项目编写了这个,它的工作非常好(需要jQuery),只需几分钟即可实现整个站点 . 它首先提供灰色文本,聚焦时为浅灰色,打字时为黑色 . 只要输入字段为空,它还会提供占位符文本 .
首先设置表单并在输入标记上包含占位符属性 .
只需复制此代码并将其另存为placeholder.js .
仅用于一个输入
当浏览器不支持HTML5占位符属性时,我建议您在站点的所有输入字段上实现它:
在尝试了一些建议并在IE中查看问题后,这是有效的:
https://github.com/parndt/jquery-html5-placeholder-shim/
我喜欢什么 - 你只需要包含js文件 . 无需启动它或任何东西 .
以下解决方案使用占位符属性绑定到输入文本元素 . 它仅为IE模拟占位符行为,如果未更改,则清除提交时的输入值字段 .
添加此脚本,IE似乎支持HTML5占位符 .
我建议你一个简单的功能:
要使用它,请以这种方式调用它:
我想出了一个简单的占位符JQuery脚本,该脚本允许自定义颜色,并在聚焦时使用清除输入的不同行为 . 它取代了Firefox和Chrome中的默认占位符,并增加了对IE8的支持 .
Placeholdr是我写的超轻量级嵌入式占位符jQuery polyfill . 它不到1 KB缩小 .
我确保这个库解决了您的两个问题:
Placeholdr扩展jQuery $.fn.val() function以防止因Placeholdr而在输入字段中出现文本时出现意外返回值 . 因此,如果您坚持使用jQuery API来访问您的字段' values, you won' t需要更改一个东西 .
Placeholdr侦听表单提交,并从字段中删除占位符文本,以便服务器只看到一个空值 .
同样,我与Placeholdr的目标是为占位符问题提供一个简单的插入式解决方案 . 让我知道Github是否还有其他任何你对Placeholdr支持感兴趣的事情 .
插入插件并检查ie是完全workingjquery.placeholder.js
这是一个纯javascript函数(不需要jquery),它将为IE 8及以下版本创建占位符,它也适用于密码 . 它读取HTML5占位符属性并在表单元素后面创建一个span元素,并使表单元素背景透明:
注意:作者这个polyfill声称它_844131_但是根据IE11的评论不是这样,但IE11 has native support, as do most modern browsers
Placeholders.js是最好的占位符polyfill我依赖于JQuery,涵盖其他旧版浏览器(不仅仅是IE),并且具有隐藏输入和一次运行占位符的选项 .
我用jquery.placeholderlabels . 它基于this,可以演示here .
适用于ie7,ie8,ie9 .
行为模仿当前的firefox和chrome行为 - 其中“占位符”文本在焦点上仍然可见,并且只有在字段中键入内容后才会消失 .
我在创建自己的jQuery插件后感到沮丧,因为现有的填充程序会将占位符隐藏在焦点上,这会产生较差的用户体验,也与Firefox,Chrome和Safari处理它的方式不相符 . 如果您希望在首次加载页面或弹出窗口时聚焦输入,同时在输入文本之前仍显示占位符,则尤其如此 .
https://github.com/nspady/jquery-placeholder-labels/