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


Posted in Javascript onJanuary 15, 2016

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,添加后可能会对页面布局产生一定影响。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JSONObject使用方法详解
Dec 17 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
利用CSS3在Angular中实现动画
Jan 15 #Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 #Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 #Javascript
JavaScript知识点总结之如何提高性能
Jan 15 #Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
Javascript 解疑
2009/11/11 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
正规的求职信范文分享
2013/12/11 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
教堂婚礼主持词
2014/03/14 职场文书
课外访万家心得体会
2014/09/03 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
质检员岗位职责
2015/02/03 职场文书
学校通报表扬范文
2015/05/04 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
分享几个简单MySQL优化小妙招
2022/03/31 MySQL