javascript - 怎么清除表单的value值??
本文介绍了javascript - 怎么清除表单的value值??的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<input type="text" name="搜索" value="搜索" id="selector"/>
$(function(){//只对chrome有效??????????
var selector=$("#selector");
var value=selector.attr("value");
selector.focus(function(){
$(this).attr("value","")
}).blur(function(){
$(this).attr("value",value);
})
})
希望当搜索框获得焦点时,清除value内容,失去焦点时,重新添加value值,但是结果只对谷歌有效,当获得焦点时ie根本没反应,不知什么情况??
解决方案
建议你改进一下,首先应该优先使用placeholder
<input type="text" name="搜索" value="搜索" placeholder="搜索" id="selector"/>
这个placeholder在ff、chrome等浏览器支持修改样式
::-moz-placeholder{color:red;} //ff
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10
然后判断一下 如果浏览器不支持placeholder(我这个例子只判断了ie8),再进行js模拟placeholder
的操作
$(function(){
if(!!navigator.userAgent.match(/MSIE 8.0/)){
$('input[placeholder], textarea[placeholder]').each(function() {
var input = $(this);
if (input.val() === '' && input.attr("placeholder") !== ''){
input.addClass("placeholder").val(input.attr('placeholder'));
}
input.focus(function() {
if (input.val() === input.attr('placeholder')) {
input.val('');
}
});
input.blur(function() {
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
});
注释:
:text选择所有类型为text的input元素。
如果需要自定义样式,并且希望placeholder
在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder
的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label
。
这篇关于javascript - 怎么清除表单的value值??的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文