需要帮助将此内嵌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';}" />

来源

2009-12-16 Shpigford

首先，让您的生活更轻松，给输入一个类：

<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"); 
    } 
    }); 
});

来源

2009-12-16 23:51:21 cletus

“一个jQuery函数，然后我可以适用于任何输入栏某一类。” – Breton 2009-12-16 23:59:16

也就是说，您的解决方案不像OP所要求的那样一般。 – Breton 2009-12-16 23:59:47

@Breton：你说得对。修正了，谢谢。 – cletus 2009-12-17 00:03:11

$(":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"); 
    });

来源

2009-12-16 23:51:53 Sampson

如何使这个工作与多个表单域？如果它抓取了'value'属性的内容，那么我可以在任何/多个输入字段中使用它。 – Shpigford 2009-12-17 03:08:43

您可以通过更改选择器并将其应用于更广泛的应用于任何数量的字段。我不确定你的意思是抓住价值。 – Sampson 2009-12-17 03:45:19

未经检验

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。

来源

2009-12-16 23:55:32 Breton

把它变成一个插件

$.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

来源

2009-12-17 01:52:00 czarchaic

如何使用多个表单域进行此项工作？如果它抓取了'value'属性的内容，那么我可以在任何/多个输入字段中使用它。 – Shpigford 2009-12-17 03:07:56

我修改了代码以捕获该字段的值作为其默认值。（3号线） – czarchaic 2009-12-17 03:51:53

需要帮助将此内嵌javascript转换为jQuery函数

回答

相关问题