js兼容占位符属性的详细说明

作为. net后台开发者，程的博客大多是前端相关的博文。是时候考虑改变方向，转向前端开发了.有点吐槽，最近被是否换工作搞糊涂了，我选择有困难！继续到前端，这次来说说输入框占位符的属性。html5的新属性是输入框没有输入值时显示的提示文本(自理解)，例如：。

它看起来很容易使用，但只能在支持html的浏览器版本中显示。对于无法支持的浏览器版本，对于追求完美的开发者来说是非常难受的。我在网上找了很多资料，很多大牛们已经有了解决方案，但是都有一定程度的缺陷。在这里做一个整合修改：(我忘了我看了多少别人的代码，地址是什么，所以向其他原作者道歉，如有版权问题请联系我！-.——)在我看来，这种扩展就像美化浏览器界面功能，但我始终坚持自然是最美的。因此，在支持该属性的浏览器版本中，我不需要进行其他修改。首先判断是否支持该属性：复制代码如下：if(！(“占位符”在文档中。createelement ('input'))) {}如果不支持，作业即将到来。取出所有带有占位符属性的input : text/input 3360 password/text area，取出它们各自的占位符属性值，然后模仿函数，在每个标签后添加一个标签标签来显示占位符值。当输入值时，清空显示的字符串，当输入值被删除时，显示字符串。复制代码如下：var $ element=$ (this)，占位符=$ element.attr('占位符')；If(占位符){//文本框id var element id=$ element . attr(' id ')；if(！element id){ var now=new Date()；element id=' LBL _ placeholder ' now . getseconds()now .get毫秒()；$element.attr('id '，element id)；}//添加一个标签来显示占位符var $ label=$ ('label '，{html3360 $ element.val()？“:占位符”，代表“: elementId，CSS : { position : ' absolute '，cursor: 'text '，color: ' # a9a9a9 '，font size : $ element . CSS(' font size ')，font family : $ element . CSS(' font family ')} })。insert after($元素)；//绑定事件var _ set position=function(){ $ label . CSS({ marginto p : GetStringNumValue($ element . CSS(' margin top '))8 ' px '，margin left : '-'(GetStringNumValue($ element . CSS(' width '))-6 '(px ' })；} var _ resetPlaceholder=function(){ if($ element . val()){ $ label . html(null)；} else { _ SetPosition()；$label.html(占位符)；} } _ SetPosition()；$ element . on(' focus blur input key up property change resetplace holder '，_ resetplace holder)；代码非常简单，需要注意以下几点：1。标签的上边距/左边距，因为我们的项目使用bootstrap框架，输入框的内部间距被设置为“padding 3360 4px6px”。因此，相应的像素值应该在这里缩进。2.GetStringNumValue()是我们自己定义的方法，它使用正则表达式从字符串中提取数字，例如，“123px”返回123。3.对于IE中不支持的版本，propertychange真的是一个很好的方法，完美的结合！4、扩展方法resetplaceholder，用于在使用js更改输入框值(赋值和空)时设置占位符的对应值。效果：——ie8 。

—— ie9