专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > Web前端

解决IE不支持placeholder的有关问题

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
解决IE不支持placeholder的问题

【前言】

     在实践过程中发现jquery.placeholder.js对placeholder支持的效果不是特别理想,placeholder属性值时而会消失,所以建议采用原生JS方案。

 

【代码】

<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo测试</title><style type="text/css">*{margin: 0;padding: 0}</style></head><body><input type="text" name="username" placeholder="请输入名字"><script type="text/javascript">placeholder();function placeholder() {      var doc=document,          inputs=doc.getElementsByTagName('input'),          //浏览器input域是否支持placeholder          supportPlaceholder='placeholder'in doc.createElement('input'),          placeholder=function(input){              var text=input.getAttribute('placeholder'),              defaultValue=input.defaultValue;              if(defaultValue==''){                  input.value=text              }              input.onfocus=function(){                  if(input.value===text){                      this.value=''                  }              };              input.onblur=function(){                  if(input.value===''){                      this.value=text                  }              }          };          if(!supportPlaceholder){              for(var i=0,len=inputs.length;i<len;i++){                  var input=inputs[i],                  text=input.getAttribute('placeholder');                  if(input.type==='text'&&text){                      placeholder(input)                  }              }          }  }  </script></body></html>

 

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: