placeholder属性在IE中失效的解决办法

王小优
王小优
王小优
231
文章
0
评论
2015年10月27日
评论
3,156 1151字阅读3分50秒

placeholder是一个很实用的HTML5属性,但是该属性在低版本的IE下是无效的,本文给出placeholder属性在IE中失效的解决办法。

在页面设计中,表单的设计需要提示性的词语来引导用户使用,最常见的的就是使用<input>标签placeholder属性,只可惜这个HTML5属性在低版本的IE下会失效,那该怎么办呢?

先来了解下placeholder

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。如:

  1. <form action="xxx.php" method="get">
  2. <input type="search" name="username" placeholder="用户名" />
  3. </form>

用户在使用表单的时候就会看到“用户名”这样的提示,在用户点击输入框时提示文字消失,非常的实用。但是该效果在IE下会失效,如果是多个输入框的话,没有提示文字,对用户十分的不友好。

placeholder属性在IE中失效的解决办法

只需要使用以下JS代码,就可以解决placeholder属性在IE中失效了。

  1. <script type="text/javascript">
  2. ;(function($){
  3. $.fn.placeholder = function(options){
  4. var opts = $.extend({}, $.fn.placeholder.defaults, options);
  5. var isIE = document.all ? true : false;
  6. return this.each(function(){
  7. var _this = this,
  8. placeholderValue =_this.getAttribute("placeholder"); //缓存默认的placeholder值
  9. if(isIE){
  10. _this.setAttribute("value",placeholderValue);
  11. _this.onfocus = function(){
  12. $.trim(_this.value) == placeholderValue ? _this.value = "" : '';
  13. };
  14. _this.onblur = function(){
  15. $.trim(_this.value) == "" ? _this.value = placeholderValue : '';
  16. };
  17. }
  18. });
  19. };
  20. })(jQuery);
  21. </script>

然后设置需要支持此功能的元素。

  1. <script type="text/javascript">
  2. $("input").placeholder();
  3. </script>

注意:此代码基于jquery库,所以使用前请先引入jquery库文件。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: