概述
html中，placeholder作为input的一个属性，起到了在输入框中占位并提示的作用。
但是有一些浏览器，如chrome，当鼠标点击输入框时，placeholder的值不消失，只有输入数据才消失，会使前端用户体验大打折扣。
看了很多大神的方法，写了长长的js，看着有点吃力，就想到了下面这种最傻的方法解决了这个问题。
html代码：
鼠标点击input时，placeholder中的提示信息消失：
PlaceHolder的两种实现方式
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息(hint)，该字段会在输入为空时显示。
如
目前浏览器的支持情况
然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致
•IE10+里鼠标点击时(获取焦点)placeholder文本消失
•Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。
两种方式的思路
1.(方式一)使用input的value作为显示文本
2.(方式二)不使用value，添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面
最后
以上就是飘逸楼房为你收集整理的html input 点击消失,input点击后placeholder中的提示消息消失_javascript技巧的全部内容，希望文章能够帮你解决html input 点击消失,input点击后placeholder中的提示消息消失_javascript技巧所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复