需要帮助将此内嵌javascript转换为jQuery函数
问题描述:
我有以下显示初始值的HTML/JS,当您在输入字段中单击时将其删除,然后使用原始值重新填充它,不输入任何东西。需要帮助将此内嵌javascript转换为jQuery函数
我需要在同一页面上的多个输入字段上这样做,因此想将它变成一个jQuery函数,然后我可以将它应用于具有某个类的任何输入字段。
<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" />
答
首先,让您的生活更轻松,给输入一个类:
<input type="text" class="search" name="search">
您可以使用属性选择:
$(":text[name='search']")...
但这是多更快:
$("input.search")...
然后用这个:
$(function() {
$("input.search").focus(function() {
this.defaultval = this.defaultval || $(this).val();
if ($(this).val() == this.defaultval) {
$(this).val("").css("color", "#000");
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val(this.defaultval).css("color", "#AAA");
}
});
});
答
$(":text[name='search']")
.focus(function(){
if ($(this).val() == 'Search by name')
$(this).val("").css("color", "black");
})
.blur(function(){
if ($(this).val() == "")
$(this).val("Search by name").css("color", "#aaa");
});
答
未经检验
jQuery(function() {
jQuery("input[type=text]").bind("focus",function(e){
var input = e.target;
input.defaultval = input.defaultval || input.value;
if(input.value==input.defaultval) {
input.value = "";
input.style.color = '#000';
}
}).bind("blur",function(e){
var input = e.target;
if(input.value == '') {
input.value = input.defaultval;
input.style.color = '#aaa';
}
})
});
编辑:这似乎是比别人更通用的解决方案。它首先需要输入字段中的默认文本。虽然我不打扰在jQuery中包装事件目标来改变CSS。
答
把它变成一个插件
$.fn.inputMagic=function(text){
return this.each(function(){
var text=$(this).val()||text||''
$(this).focus(function(){
if ($(this).val() == text){
$(this).val("").css("color", "black");
}
}).blur(function(){
if ($(this).val() == ""){
$(this).val(text).css("color", "#aaa");
}
});
});
}
然后,你可以这样调用
$('input.search').inputMagic('Search by name').show();//and continue to chain
“一个jQuery函数,然后我可以适用于任何输入栏某一类。” – Breton 2009-12-16 23:59:16
也就是说,您的解决方案不像OP所要求的那样一般。 – Breton 2009-12-16 23:59:47
@Breton:你说得对。修正了,谢谢。 – cletus 2009-12-17 00:03:11