【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

placeholder 是 html5 新增加的属性，主要提供一种提示（hint），用于描述输入域所期待的值。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。

我们先看下在谷歌浏览器中的效果，如图所示：

获得焦点时：

输入字段：

因为是 html5 属性，自然低版本的浏览器比如 ie6-8 不兼容。下面就介绍下如何在低版本浏览器中显示以上效果，话不多说直接上代码。

html：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="renderer" content="webkit"/><meta name="keywords" content=""/><meta name="description" content=""/><title>基于 jquery 实现 ie 浏览器兼容 placeholder 效果</title><style>*{margin:0;padding:0;}.txt{position:relative;font-size:12px;margin:10px;}.txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width:200px;}.txt .txt-tip{color:#999;position:absolute;left:10px;top:0;height:32px;line-height:34px;}</style>
</head>
<body><div class="txt"><input type="text" value=""/></div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/placeholder.js"></script>
<script>
$(function(){var $input = $('.txt input');initPlaceholder($input, '请输入内容', 'txt-tip');
});
</script>

placeholder.js：

function initPlaceholder($input, msg, classname){var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;var isPlaceholder = 'placeholder' in document.createElement('input');if(isPlaceholder && !isIE){$input.attr('placeholder', msg);}else{var $tip = $('<span class="' + classname + '">' + msg + '</span>');$input.after($tip);$.data($input[0], 'tip', $tip);if($input.val() != ''){hidePHTip($input);}dealPHTip($input, $tip);}
}
function hidePHTip($input){var $tip = $.data($input[0], 'tip');if($tip){$tip.hide();}
}
function dealPHTip($input, $tip){var _deal = function(){var val = $input.val();if(val == ''){$tip.show();}else{$tip.hide();}};$tip.click(function(){$input.focus();});$input.on('input propertychange', function(){clearTimeout(timeout);var timeout = setTimeout(_deal, 0);});
}

实现原理：首先过滤下浏览器，非 ie 浏览器并且支持 placeholder 属性就用 placeholder，ie 浏览器则用 span 代替 placeholder 文本内容，通过样式定位在 input 上方，同时监听 input 输入框值的变化来判断显示或隐藏 span。

我们来看下 ie6 浏览器中的效果：

获得焦点时：

输入字段：

可以看到和谷歌浏览器的效果是一致的，唯一不足的就是文字没有居中，可以通过 css 进行修改。

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果相关推荐

jQuery版本，以及IE浏览器兼容问题
1.版本 jQuery目前有3个版本,分别是1x.2x.3x: 1x版本目前使用最广泛,支持IE6,7,8:2x,3x版本都不支持IE6,7,8:其中1版本使用最广泛,3版本目前依然在维护中最终版: ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
jQ进阶篇--jQuery封装placeholder效果，让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
jquery.placeholder.min.js让你的IE浏览器支持placeholder
2019独角兽企业重金招聘Python工程师标准>>> jquery.placeholder.min.js让你的IE浏览器支持placeholder http://www.ijque ...
解决jquery的scrollTop()置顶的浏览器兼容
2019独角兽企业重金招聘Python工程师标准>>> 对于前端开发者来说,浏览器兼容是经常会遇到的问题,在不同的项目中经常会遇到不同的弹出层操作,比如登录的弹出层,需要在屏幕的中间 ...
基于jQuery的插件扩展，主要用于识别浏览器内核与外壳的类型和版本
写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本.可识别各种浏览器的内核,并已经支持多种国内主流浏览器. 费话不多说,上我的JavaScript代码:(文件名:jquery ...
ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
移动端ajax,jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为 ...
基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果相关推荐

最新文章

热门文章