input placeholder样式,html placeholder属性

　　HTML5对Web表单做了很多改进，比如新的输入类型、表单验证等。

　　占位符是HTML5中的另一个新属性。当在input或textarea中设置该属性时，该值的内容将在文本框中显示为灰色文字提示。当文本框获得焦点时，提示文本消失。以前为了达到这种效果，是用JavaScript来控制的。火狐、谷歌chrome等。支持了，但是IE有违和感！

　　示例：输入id= t1 type= text placeholder=请输入文本/

　　本文介绍了一个在IE下支持占位符的超级属性插件，同时也兼容其他不支持占位符的浏览器。代码如下：复制代码如下：

　　$(文档)。ready(function(){

　　var doc=文档，

　　inputs=doc . getelementsbytagname( input )，

　　doc.createElement(input )中的support placeholder= placeholder ，

　　占位符=函数(输入){

　　var text=input . get attribute( placeholder )，

　　default value=input . default value；

　　if(defaultValue==){

　　输入值=文本

　　}

　　input.onfocus=function(){

　　if(input.value===text)

　　{

　　this.value=

　　}

　　};

　　input.onblur=function(){

　　if(input.value===){

　　this.value=文本

　　}

　　}

　　};

　　如果(！supportPlaceholder){

　　for(var i=0，len=inputs.lengthileni ){

　　var输入=输入[i]，

　　text=input . get attribute( placeholder )。

　　if(input.type===texttext){

　　占位符(输入)

　　}

　　}

　　}

　　});

　　直接复制代码保存为js文件以供参考，无需任何进一步处理，超级方便！

　　Ex:这样确实可以让IE的输入显示占位符属性，但是如果页面上只有一个输入，如果有多个输入，并且没有输入填充，那么它的空输入会自动填充占位符值，导致错误。例如，复制代码如下：

　　Type= text placeholder=输入商品代码 name= goods code id= goods code value= 123 /

　　Type= text placeholder=输入商品名称 name= goods name id= goods name value=输入商品名称/

　　解决办法是自己在后台判断，也许在上面的js文件里就能解决，以后再研究~！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。