您好,欢迎访问湖南盲人按摩在线,点击这里可以了解,如何成为湖南盲人按摩学会的线下会员! 将湖南盲人在线|湖南盲人按摩学会设为首页  收藏湖南盲人在线  
  您当前位置:湖南盲人按摩在线 >> 知识园地 >> 盲人学电脑 >> 浏览文章

placeholder属性怎么用输入框的placeholder 属性

【字体: 】  [2022-12-10 11:00:02] 打印本页
【关键词】:属性,怎么,输入 【作者】:admin 【来源】:一起学习吧

  什么是placeholder?

  是一种表单输入提示,该提示会在输入字段为空时且失去焦点的时候显示,并会在字段获得焦点时消失。

  place?holder示例-1

  place?holder示例-2

  背景:

  HTML 4.01 与 HTML 5 之间的差异:placeholder 属性是 HTML5 中的新属性。IE9及IE9以下的浏览器就不支持这个属性,最近做的项目又要求必须支持IE9,即从网上苦寻兼容IE9的方案。

  解决方案:

  可引入placeholder.js文件,然后调用其中的$.fn.renderPlaceholder()方法。

  placeholder.js文件内容如下:

  // 兼容IE9下的placeholder

  $.fn.renderPlaceholder = function(){

  $(function(){

  function placeholderSupport() {

  return 'placeholder' in document.createElement('input');

  }

  if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder

  $("[placeholder]").each(function(){

  var _this = $(this);

  var left = _this.css("padding-left");

  _this.parent().append('' + _this.attr("placeholder") + '');

  if(_this.val() != ""){

  _this.parent().find("span.placeholder").hide();

  }

  else{

  _this.parent().find("span.placeholder").show();

  }

  }).on("focus", function(){

  var _this = $(this);

  _this.parent().find("span.placeholder").hide();

  }).on("blur", function(){

  var _this = $(this);

  if(_this.val() != ""){

  _this.parent().find("span.placeholder").hide();

  }

  else{

  _this.parent().find("span.placeholder").show();

  }

  });

  // 点击表示placeholder的标签相当于触发input

  $("span.placeholder").on("click", function(){

  $(this).hide();

  $(this).siblings("[placeholder]").trigger("click");

  $(this).siblings("[placeholder]").trigger("focus");

  });

  }

  });

  }

  注意:

  1) 查询时一般伴随着重置功能,重置完成清空输入框内容后,vue数据双向绑定,数值清空,不会触发blur,也要执行下placeholder.js文件中的$.fn.renderPlaceholder()方法。

  2) 带有claear清空选项,要监听值的变化,如果为空,则执行placeholder.show();

  带有claear清空选项时,placeholder注意

  相关链接:
关于湖南盲人按摩学会 |  联系我们 | 湖南盲人按摩在线 | 湖南盲人按摩学会 | 湖南颐而康职业技术学校
版权所有 © 2009-2021 湖南盲人按摩在线 湖南省盲人按摩学会 未经许可不得建立镜象
技术支持:湖南省残疾人培训基地 长沙市残疾人培训基地 本站为大型公益性盲人按摩信息门户网站,与任何盲人按摩技师、盲人按摩机构无关
盲人在线QQ群:爱盲群86541505 备案编号:湘ICP备12010802号-1