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 attribute。

Answer 5

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

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

Jquery模糊文字并在焦点上清空

5 个答案: