input点击后placeholder中的提示消息消失
来源:互联网 发布:java的布尔类型 编辑:程序博客网 时间:2024/06/03 18:29
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上面
两种方式各有优缺点,方式一占用了input的value属性,表单提交时需要额外做一些判断工作,方式二则使用了额外的标签。
方式一
方式二
方式2 对于以下场景不适合
1. input初始隐藏
此时无法取到input的offset,继而无法定位span到input上面。
2. 包含input的页面dom结构发生变化
比如页面里删除了一些元素或添加了一些元素,导致input向上或向下偏移,而此时span则没有偏移(span相对body定位)。这比较恶心,可以考虑把span作为input的兄弟元素,即相对内层div定位(而不是body)。但这样必须强制给外层div添加position:relative,添加后可能会对页面布局产生一定影响。
- input点击后placeholder中的提示消息消失
- enter键切换焦点,input获得焦点后placeholder消失
- placeholder属性 点击文本框,输入值默认提示内容消失
- input 提示灰色,点击消失,并且调整input框高度
- input鼠标点击提示消失,鼠标点出提示出现
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- 设计input搜索框提示文字点击消失的效果
- 解决html中input的placeholder的颜色,点击时消失,input点击时样式的问题
- 文本输入框中的提示点击消失,点击出现
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
- JQuery Placeholder - Input提示信息
- 关于jquery插件placeholder 1.3在chrome和safari下点击后不消失的解决方法
- 美观的CSS搜索框,点击后提示消失
- web中文本框的提示字段 点击后消失
- jQuery实现文本域提示文字点击后消失
- 关于placeholder的点击的消失问题
- 点击后按钮消失
- JS input默认值点击消失
- Vue2.0配置vue-router
- CrashRpt开源代码使用详解(一):CrashRpt介绍及简单应用
- Step By Step(Lua目录)
- js笔记:js正则表达式语法(es5)
- UVA 136
- input点击后placeholder中的提示消息消失
- Eclipse项目转换成studio项目
- (练习)java字符串
- JointJS零基础入门04-链接样式
- Two strings CodeForces
- office excel无法打开超链接解决方法
- TextView和ImageView的倾斜
- Java中的集合框架
- execl单元格不为0的时候设置颜色