在做登录的时候我们都会用到文本框中显示要输入的默认提示,以前都是用js判断的比较麻烦,还有一个就是password是通过两个input框切换实现的,还好html5提供了一个属性placeholder,在input类型的框上可以起到占位符的效果,但现在还不是所有的浏览器都支持很html5,下面就通过jquery、html5来实现可以兼容多种浏览器的placeholder效果。
大致思路:
1.判断浏览器是否支持html5的placeholder,支持就直接使用该属性。
2.不支持就通过jquery来添加blur focus事件
3.对password框的特使处理
运行前要引入jquery类库,
<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示,鼠标离开显示文字 html5 and jquery<br/>
<br/>
账号:<input type="text" name="email" placeholder = '用户账号' /><br/>
<br/>
密码:<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
});
}
</script>
分享到:
相关推荐
IE8 placeholder 兼容使用插件。可兼容password类型,可以正常显示提示字。
jQuery placeholder实现源码(兼容所有浏览器)
ie6 7 8兼容html5属性placeholder
jquery插件解决IE6到IE9版本不支持placeholder的问题,支持同一个网页包含多个password input的版本。用法:下载插件并引用,将插件代码里面的login-input改成自己的密码input输入框的样式即可。
IE下实现placeholder效果的jquery插件,同时支持文本和密码输入框,内附demo
在不支持的浏览器时可以使用jquery的placeholder插件实现。 使用方法: $.Placeholder.init(); // default setting $.Placeholder.init({ color : 'rgb(255, 255, 0)' }); // custom placeholder text color 更多使用...
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
使用该插件(jquery.placeholder.js)解决IE9及以版本下对placeholder的兼容性问题
兼容ie8、ie9的placeholder属性,其他浏览器用自身的placeholder。在ie8和ie9浏览器,点击span则让input聚焦。
本工程旨在借助jquery placeholder实现HTML5中placeholder特效。 本工程编码方式:UTF-8 相关博客:http://blog.csdn.net/gaohuanjie/article/details/37724305
完美兼容H5 placeholder属性在IE9及以下版本的问题 自测可用,修改点少
jquery 代码解决placeholder不换行,不居中问题
用span标签定位到placeholder位置,用jq控制span的显示和隐藏。
placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有...非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的。现在用jQuery来使这些非现代浏览器也同样能能实现placehol
基于jQuery的placeholder组件,支持IE8及以下
原生手写的IEplaceholder.js插件,能够解决在IE9及以下浏览器上placeholder不能显示的bug,使用时只需要引入该IEplaceholder.js插件,然后获取所有的input节点,最后调用函数iePlaceholder(nodes,color)即可,nodes...