input点击后placeholder中的提示消息消失(inputchange)

编辑：rootadmin

推荐整理分享input点击后placeholder中的提示消息消失(inputchange)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:inputclip,input选项,input:active,input onclick点击button无反应,input选项,input onclick点击button无反应,input onclick点击button无反应,input选项,内容如对您有帮助，希望把文章链接给更多的朋友！

html中，placeholder作为input的一个属性，起到了在输入框中占位并提示的作用。

但是有一些浏览器，如chrome，当鼠标点击输入框时，placeholder的值不消失，只有输入数据才消失，会使前端用户体验大打折扣。

看了很多大神的方法，写了长长的js，看着有点吃力，就想到了下面这种最傻的方法解决了这个问题。

html代码：

鼠标点击input时，placeholder中的提示信息消失：

PlaceHolder的两种实现方式

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

如

目前浏览器的支持情况

然而，虽然IE+支持placeholder属性，它的表现与其它浏览器也不一致&#;IE+里鼠标点击时（获取焦点）placeholder文本消失&#;Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

input点击后placeholder中的提示消息消失(inputchange)

这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。

两种方式的思路

1.(方式一)使用input的value作为显示文本

2.(方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面

两种方式各有优缺点，方式一占用了input的value属性，表单提交时需要额外做一些判断工作，方式二则使用了额外的标签。

方式一

方式二

方式2 对于以下场景不适合

1. input初始隐藏

　　此时无法取到input的offset，继而无法定位span到input上面。

2. 包含input的页面dom结构发生变化

　　比如页面里删除了一些元素或添加了一些元素，导致input向上或向下偏移，而此时span则没有偏移（span相对body定位）。这比较恶心，可以考虑把span作为input的兄弟元素，即相对内层div定位（而不是body）。但这样必须强制给外层div添加position:relative，添加后可能会对页面布局产生一定影响。

JavaScript时间操作之年月日星期级联操作本文实例介绍了JavaScript时间操作之级联日期选择操作的详细代码，分享给大家供大家参考，具体内容如下效果图：具体代码：htmlheadmetahttp-equiv="Content-Ty

javascript实现倒计时跳转页面很多网页都有类似的效果，那就是经过指定的时间能够跳转到其他页面，如果再人性化一点话，会带有倒计时效果，本章节就介绍一下如何实现此效果

轻松实现js图片预览功能本文实例讲述了js实现图片预览的方法，自己以前写的一个，代码比较简洁，分享给大家供大家参考。具体如下：一、效果预览效果图：二、实现代码：

标签: inputchange

本文链接地址:https://www.jiuchutong.com/biancheng/383820.html 转载请保留说明！

上一篇：JavaScript程序开发之JS代码放置的位置(javascript要打开吗)

下一篇：JavaScript时间操作之年月日星期级联操作(js 时间轴)