placeholder作为html5表单新特性,提供了很多便利,它能够在表单域提示用户输入的内容,而在用户输入内容后自行消失。ie对其兼容性并不是很好,ie9以下不能兼容html5,所以对placeholder这个属性也是不支持的。实际开发过程中的页面要做到能够兼容各个浏览器尤其是ie,就要额外多写很多代码了。单单如果是文本输入框来说,placeholder很容易实现,但如果是密码框,考虑的因素就很多了。今天费了一番周折,这里针对“密码框”来分析如何实现placeholder写法。最后要兼容ie,用jq实现。
要实现“密码框”的placeholder需要考虑以下方面:
默认状态下,密码框中显示提示内容,类似于“请输入密码”。而当点击密码框,密码框内的文字消失,密码框获得焦点,用户输入内容。而当用户点击其他区域(文本框失去焦点)时,如果输入内容为空,密码框内再次显示“请输入密码”。
最后总结出三点比较关键的地方:
1.默认状态,也就是DOM加载完后,密码框内的文字为“请输入密码”;
2.当用户点击密码框,若其中的内容为“请输入密码”,则使其内容变为空;反之不做任何改变;
3.当“密码框”失去焦点,若其中内容为空,则还原其显示“请输入密码”;反之不做任何改变;
说的有点麻烦,举个例子。
一个form表单:
第二个输入框为输入密码框,默认状态显示“请输入密码”。
点击输入框,内容变为空。
a.不输入任何内容,点击页面其他区域使其失去焦点,输入框内容再次变为“请输入密码”。
b.输入内容,点击页面其他区域使其失去焦点,输入框不发生改变。
介绍完操作的过程,那么重点就来了,我们要写的是一个密码框,我们知道input标签的type属性决定其是密码框还是文本框,从而决定其文字显示是文字还是黑点。在两种状态之间切换是改变其type属性吗?
ie不允许改变input和button的type属性值
所以这条路走不通。不知大型网站是如何解决这个问题,在这里介绍一种不算为上上策的解决方案。对于我们要操作的输入密码添加两个input标签,type属性分别为text和password,然后在需要的时候分别显示和隐藏即可。
贴上全部代码,首先进行客户端检测,看其是否支持placeholder属性。注意我们要对能力检测而不是浏览器检测,所以不仅仅是检测浏览器是否为ie等。
为了易于理解也同时避免重复操作,这里将普通text和password区别对待,jq代码前半部分是对密码框进行的focus和blur进行监听,后半部分则是针对普通text的,也比较简单。
<input type="text" name="account" placeholder="请输入手机号" />
<input type="password" class = "password" name="pwd" placeholder ="请输入密码" />
<input type="text" class = "text" placeholder ="请输入密码"/>
function change(obj, alt, val) {
obj.hide();
alt.show();
alt.val(val);
}
function placeHolder() {
//holder获取所有文本框返回jquery对象,然后使用.each()方法对其进行遍历
var holder = $("input[type = 'text']").not("[class = 'text']"),
texts = $(".text"),
passwords = $(".password"),
note = passwords.attr("placeholder");
change(passwords, texts, note);
texts.on("focus",function(){
change(texts, passwords, "");
passwords.focus();
});
passwords.on("blur",function(){
if($(this).val() == ""){
change(passwords, texts, note);
}
});
holder.each(function () {
var that = $(this);
var note = that.attr("placeholder")
that.val(note);
that.on({
"focus": function () {
if (that.val() == note) {
that.val("");
}
},
"blur": function () {
if (that.val() == "") {
that.val(note);
}
}
});
});
};
//能力检测
function isPlaceHolder(){
return "placeholder" in document.createElement("input");
}
if(!isPlaceHolder()){
placeHolder();
}