大家好,感谢邀请,今天来为大家分享一下placeholder是什么意思的问题,以及和输入框的placeholder的一些困惑,大家要是还不太明白的话,也没有关系,因为接下来将为大家分享,希望可以帮助到大家,解决大家的问题,下面就开始吧!
什么是placeholder?
是一种表单输入提示,该提示会在输入字段为空时且失去焦点的时候显示,并会在字段获得焦点时消失。
HTML4.01与HTML5之间的差异:placeholder属性是HTML5中的新属性。IE9及IE9以下的浏览器就不支持这个属性,最近做的项目又要求必须支持IE9,即从网上苦寻兼容IE9的方案。
可引入placeholder.js文件,然后调用其中的$.fn.renderPlaceholder()方法。
//兼容IE9下的placeholder\n$.fn.renderPlaceholder=function(){\n$(function(){\nfunctionplaceholderSupport(){\nreturn'placeholder'indocument.createElement('input');\n}\nif(!placeholderSupport()){//判断浏览器是否支持placeholder\n$("[placeholder]").each(function(){\nvar_this=$(this);\nvarleft=_this.css("padding-left");\n_this.parent().append('<spanclass="placeholder"data-type="placeholder"style="left:'+left+'">'+_this.attr("placeholder")+'</span>');\nif(_this.val()!=""){\n_this.parent().find("span.placeholder").hide();\n}\nelse{\n_this.parent().find("span.placeholder").show();\n}\n}).on("focus",function(){\nvar_this=$(this);\n_this.parent().find("span.placeholder").hide();\n}).on("blur",function(){\nvar_this=$(this);\nif(_this.val()!=""){\n_this.parent().find("span.placeholder").hide();\n}\nelse{\n_this.parent().find("span.placeholder").show();\n}\n});\n//点击表示placeholder的标签相当于触发input\n$("span.placeholder").on("click",function(){\n$(this).hide();\n$(this).siblings("[placeholder]").trigger("click");\n$(this).siblings("[placeholder]").trigger("focus");\n});\n}\n});\n}\n
注意:
1)查询时一般伴随着重置功能,重置完成清空输入框内容后,vue数据双向绑定,数值清空,不会触发blur,也要执行下placeholder.js文件中的$.fn.renderPlaceholder()方法。
2)带有claear清空选项,要监听值的变化,如果为空,则执行placeholder.show();
带有claear清空选项时,placeholder注意
文章到此结束,如果本次分享的placeholder是什么意思和输入框的placeholder的问题解决了您的问题,那么我们由衷的感到高兴!