Jquery 模糊文本并在焦点上为空

Question

我有多个这样的文本框。我想在聚焦时将文本应用于模糊和空白。我可以为单个文本框实现这一点。我如何传递当前元素 id 而不是在 JavaScript 函数中硬编码"#name"值？

$(document).ready(function(){

    $('#Name').focus(function()
    {
         var $ele = $(this).attr('id');
            $(this).val('');
            $(this).css('color', '#000000');
    });
    $('#Name').blur(function()
    {
           var $ele = $(this).attr('id');
            $(this).val($ele);
            $(this).css('color', '#a9a9a9')
    });
});

<input id="Name" type="text" value="" name="Name">
<input id="Phone" type="text" value="" name="Phone" >
<input id="Email" type="text" value="" name="Email">

Answer 1

您可以按$('input')选择所有输入，也可以使用 [type="text"] 放置过滤文本输入;你可以从jQuery链中获益。

$(document).ready(function(){   
    $('input[type="text"]').focus(function()
    {
         var $ele = $(this).attr('id');
            $(this).val('');
            $(this).css('color', '#000000');
    }).blur(function()
    {
           var $ele = $(this).attr('id');
            $(this).val($ele);
            $(this).css('color', '#a9a9a9')
    });
});

您可以直接在html中设置输入字段的值

<input id="Name" type="text" value="Name" name="Name">

或 在页面加载时应用默认值为：

$('input[type="text"]').each(function(){
   var $ele = $(this).attr('id');
                $(this).val($ele);
                $(this).css('color', '#a9a9a9')
});

.HTML

<input id="Name" type="text" value="" name="Name">
<input id="Phone" type="text" value="" name="Phone" >
<input id="Email" type="text" value="" name="Email">

Answer 2

你需要修改你的js

$(function(){
    $('input').focus(function()
    {
        $(this)
            .val($(this).attr('name'))
            .css('color', '#000000')
    }).blur(function()
    {
            $(this).css('color', '#a9a9a9')
    });
})();​

如果您在"模糊"上设置值，您将失去当前值...我不确定它是否正是您想要的

Answer 3

将其应用于input而不是#name。

这将适用于所有输入。

或者对要更改的元素进行.class。

Answer 4

您可以使用 $('input[type="text"]') 选择所有输入，但我认为您只想使用 placeholder HTML 属性。

Answer 5

查看 jQuery 选择器。您现在要做的是使用 ID 作为选择器。 您有很多不同的选择...

如果您希望将"#Name"替换为"input"，则可以将其应用于页面上的所有输入，或者甚至可以将通用类"class="test"添加到要触发脚本的所有元素中，然后将"#Name"替换为".test"或"input.test"，仅用于具有该类名的输入元素。