input点击后placeholder中的提示消息消失
html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用。
但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消失,会使前端用户体验大打折扣。
看了很多大神的方法,写了长长的js,看着有点吃力,就想到了下面这种最傻的方法解决了这个问题。
html代码:
<input type="text" placeholder="多个关键词空格隔开">
鼠标点击input时,placeholder中的提示信息消失:
<input type="text" placeholder="多个关键词空格隔开" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘多个关键词空格隔开‘">
PlaceHolder的两种实现方式
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。
如
<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">
目前浏览器的支持情况
然而,虽然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 = $('<span class="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,添加后可能会对页面布局产生一定影响。
相关文章
- 这篇文章主要介绍了vue:el-input输入时限制输入的类型操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 在使用xml-rpc的时候,server端获取client数据,主要是通过php输入流input,而不是$_POST数组。所以,这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25
- 这篇文章主要介绍了vue 清空input标签 中file的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-21
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本,下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09- 这篇文章主要介绍了input框中的name和id的区别介绍,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-11-22
- 这篇文章主要介绍了关于input全选反选恶心的异常情况的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
- 这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下...2016-06-12
input 点击事件无效 [Element Migrating][ElInput][Event]: click is removed.
点击无效 解决办法:可以使用 v-on 的修饰符 .native。例如:@click.native="getContentData(item)" <el-input v-for="(item,index) in voiceRetrievalData.oldContent"...2022-09-21- 这篇文章主要介绍了keras.layer.input()用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-17
如何禁用input记忆性输入:input的属性AutoComplete
firefox 和 ie 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如注册用户页面的文本框,用户多次注册时,肯定是要不同的用户名和密码,就没有必要让浏览器记录。...2013-07-31- 这篇文章主要介绍了Element Input输入框的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
- 这篇文章主要介绍了JS中input表单隐藏域及其使用方法讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-02-19
jQuery针对input的class属性写了多个值情况下的选择方法
这篇文章主要介绍了jQuery针对input的class属性写了多个值情况下的选择方法,结合实例形式对比分析了jQuery选择器针对class属性中有多个值情况下的选中方法,需要的朋友可以参考下...2016-06-12- 这篇文章主要介绍了vue 限制input只能输入正数的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 下面小编就为大家带来一篇文本框只能输入数字的实现方法(兼容IE火狐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-01
js实现input密码框提示信息的方法(附html5实现方法)
这篇文章主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下...2016-01-15- 原因分析: 任何对.php教程文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在。PHP文件不存在,没办法返回普通的404错误,它返回一个404,并带上一句&rd...2016-11-25
- 这篇文章主要介绍了react获取input输入框的值的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-06