用html5点击消失,input点击后placeholder中的提示消息消失
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属性,表单提交时需要额外做一些判断工作,方式二则使用了额外的标签。
方式一
/**
* PlaceHolder组件
* $(input).placeholder({
* word: // @string 提示文本
* color: // @string 文本颜色
* evtType: // @string focus|keydown 触发placeholder的事件类型
* })
*
* NOTE:
* evtType默认是focus,即鼠标点击到输入域时默认文本消失,keydown则模拟HTML5 placeholder属性在Firefox/Chrome里的特征,光标定位到输入域后键盘输入时默认文本才消失。
* 此外,对于HTML5 placeholder属性,IE10+和Firefox/Chrome/Safari的表现形式也不一致,因此内部实现不采用原生placeholder属性
*/
$.fn.placeholder = function(option, callback) {
var settings = $.extend({
word: '',
color: '#ccc',
evtType: 'focus'
}, option)
function bootstrap($that) {
// some alias
var word = settings.word
var color = settings.color
var evtType = settings.evtType
// default
var defColor = $that.css('color')
var defVal = $that.val()
if (defVal == '' || defVal == word) {
$that.css({color: color}).val(word)
} else {
$that.css({color: defColor})
}
function switchStatus(isDef) {
if (isDef) {
$that.val('').css({color: defColor})
} else {
$that.val(word).css({color: color})
}
}
function asFocus() {
$that.bind(evtType, function() {
var txt = $that.val()
if (txt == word) {
switchStatus(true)
}
}).bind('blur', function() {
var txt = $that.val()
if (txt == '') {
switchStatus(false)
}
})
}
function asKeydown() {
$that.bind('focus', function() {
var elem = $that[0]
var val = $that.val()
if (val == word) {
setTimeout(function() {
// 光标定位到首位
$that.setCursorPosition({index: 0})
}, 10)
}
})
}
if (evtType == 'focus') {
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
// keydown事件里处理placeholder
$that.keydown(function() {
var val = $that.val()
if (val == word) {
switchStatus(true)
}
}).keyup(function() {
var val = $that.val()
if (val == '') {
switchStatus(false)
$that.setCursorPosition({index: 0})
}
})
}
return this.each(function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
方式二
$.fn.placeholder = function(option, callback) {
var settings = $.extend({
word: '',
color: '#999',
evtType: 'focus',
zIndex: 20,
diffPaddingLeft: 3
}, option)
function bootstrap($that) {
// some alias
var word = settings.word
var color = settings.color
var evtType = settings.evtType
var zIndex = settings.zIndex
var diffPaddingLeft = settings.diffPaddingLeft
// default css
var width = $that.outerWidth()
var height = $that.outerHeight()
var fontSize = $that.css('font-size')
var fontFamily = $that.css('font-family')
var paddingLeft = $that.css('padding-left')
// process
paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft
// redner
var $placeholder = $('')
$placeholder.css({
position: 'absolute',
zIndex: '20',
color: color,
width: (width - paddingLeft) + 'px',
height: height + 'px',
fontSize: fontSize,
paddingLeft: paddingLeft + 'px',
fontFamily: fontFamily
}).text(word).hide()
// 位置调整
move()
// textarea 不加line-heihgt属性
if ($that.is('input')) {
$placeholder.css({
lineHeight: height + 'px'
})
}
$placeholder.appendTo(document.body)
// 内容为空时才显示,比如刷新页面输入域已经填入了内容时
var val = $that.val()
if ( val == '' && $that.is(':visible') ) {
$placeholder.show()
}
function hideAndFocus() {
$placeholder.hide()
$that[0].focus()
}
function move() {
var offset = $that.offset()
var top = offset.top
var left = offset.left
$placeholder.css({
top: top,
left: left
})
}
function asFocus() {
$placeholder.click(function() {
hideAndFocus()
// 盖住后无法触发input的click事件,需要模拟点击下
setTimeout(function(){
$that.click()
}, 100)
})
// IE有些bug,原本不用加此句
$that.click(hideAndFocus)
$that.blur(function() {
var txt = $that.val()
if (txt == '') {
$placeholder.show()
}
})
}
function asKeydown() {
$placeholder.click(function() {
$that[0].focus()
})
}
if (evtType == 'focus') {
asFocus()
} else if (evtType == 'keydown') {
asKeydown()
}
$that.keyup(function() {
var txt = $that.val()
if (txt == '') {
$placeholder.show()
} else {
$placeholder.hide()
}
})
// 窗口缩放时处理
$(window).resize(function() {
move()
})
// cache
$that.data('el', $placeholder)
$that.data('move', move)
}
return this.each(function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}
方式2 对于以下场景不适合
1. input初始隐藏
此时无法取到input的offset,继而无法定位span到input上面。
2. 包含input的页面dom结构发生变化
比如页面里删除了一些元素或添加了一些元素,导致input向上或向下偏移,而此时span则没有偏移(span相对body定位)。这比较恶心,可以考虑把span作为input的兄弟元素,即相对内层div定位(而不是body)。但这样必须强制给外层div添加position:relative,添加后可能会对页面布局产生一定影响。
用html5点击消失,input点击后placeholder中的提示消息消失相关推荐
- input文本框中添加提示文字,输入后自动消失
<input placeholder="提示文字"/> 效果: 如果小博的文章对你有所帮助,欢迎点赞留言关注!!!
- html表单框内文字点击消失,jQuery 使用label实现点击表单input,提示文字消失的示例...
感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 很多网站在填写表单的时候,都可以看到这样一种UI,input[type=text]里面有提示的文字,当鼠标点进去之后提示文字就消失了.以前做 ...
- html5下input的placeholder标签兼容ie9
if (!!window.ActiveXObject || "ActiveXObject" in window) { //判断在ie下执行 $(function(){ jQuer ...
- 四、Input框改placeholder中字体的颜色
Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; } 转载于:http ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤起软 ...
- [html] html5点击返回键怎样不让它返回上一页?
[html] html5点击返回键怎样不让它返回上一页? $(function() {if (window.history && window.history.pushState) { ...
- [html] html5点击返回键怎样不让它返回上一页
[html] html5点击返回键怎样不让它返回上一页 $(function() {if (window.history && window.history.pushState) {$ ...
- appium+python自动化-adb shell模拟点击事件(input tap)
前言 appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是万能的,这个时候应该转换思路,换其 ...
- html怎么设置点击播放音乐,html5点击播放音乐试听按钮动画特效
特效描述:html5 点击播放 音乐试听 按钮动画特效.html5鼠标滑过或点击播放音乐试听特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Examples eventType ...
最新文章
- 分享一个PyTorch医学图像分割开源库
- 三星手机Android9和10的区别,三星开始在Galaxy Note 9上测试Android 10
- FZU 1914 Funny Positive Sequence
- jmeter(四十五)常用Beanshell脚本
- 数码相机控制点的自动定位检校
- MySQL week()函数
- 使用虚拟路径时出现404问题
- while java_(Java) while循环
- 饥荒联机一直显示正在启动服务器,饥荒联机版启动服务器时间长 | 手游网游页游攻略大全...
- 建立企业统一即时通讯平台
- vue项目的停止_Terminal怎么停止VUE项目
- 自动化网络安全防御的问题
- Javascript 中 atob 方法解码中文字符乱码问题
- 小程序模板平台怎么选?
- Android 优化开机启动
- 网络协议-TCP协议详解
- 面向对象程序设计(c++)面试常问——for考研复试面试
- 【论文翻译】异构信息网络中的深层集合分类
- 非常时期的情人节,只能云表白了
- Nodejs数据流(Stream)手册
热门文章
- percona zabbix mysql_zabbix采用percona监控mysql主从
- 河南科技大学计算机信息安全技术考试,关于申报2020年信息安全等级保护项目的通知...
- 10-关于DOM的事件操作
- 类间关系有很多种 UML
- One-hot encoding 独热编码
- java中抽象的(abstract)方法是否可同时是静态的(static),是否可同时是本地方法(native),是否可同时被synchronized修饰...
- UVa 816 (BFS求最短路)
- 277. Find the Celebrity
- 人生几张纸,看透一辈子
- NeurIPS 2020 | 腾讯 AI Lab 解读机器学习及计算机视觉方向入选论文