我的JavaScript代码有什么问题？ （搜索栏）

Question

我在JS中有一些代码，我无法弄清楚为什么它没有做我想做的事情。基本上，我有一个搜索栏，应该写入“搜索...”。当用户点击它时，文本消失，栏变为空白。如果用户点击而没有填写任何文本，则“搜索...”文本将返回。

否则，用户输入的文本将保留在栏中。到目前为止，我的代码工作正常。问题是这样的;当用户输入内容然后将其取走时，条形图仍为空白，而“搜索...”文本应返回。 （注意：如果用户只需单击栏然后单击就会发生这种情况;默认文本会按原样返回。只有当用户输入内容然后将其取走时才会发生。）

我无法弄清楚为什么会这样。任何帮助将不胜感激。这是我的JS代码：

$(document).ready(function () {
    var search_default = 'Search...';
    $('input[type="search"]').attr('value', search_default).focus(function () {
        if ($(this).val() == search_default) {
            $(this).attr('value', '');
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).attr('value', search_default);
        }
    });
});

Answer 1

使用.val(value)代替attr('value',value)

$(document).ready(function () {
    var search_default = 'Search...';
    $('input[type="search"]').val(search_default).focus(function () {
        if ($(this).val() == search_default) {
            $(this).val('');
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).val(search_default);
        }
    });
});

Answer 2

如果您可以编辑HTML，我就是这样做的：

<强> JSFIDDLE DEMO - EDITED HTML

如果您无法编辑HTML，则需要创建data-default属性

<强> JSFIDDLE DEMO 2 - NON EDITED HTML

为元素添加data-default标记

<input type="search" data-default="Search..." value="Search...">

和jQuery

$(document).ready(function(e){
    // when you focus on the search input
    $('input[type=search]').on('focus',function(e){

        // if the value is the same as the default value
        if( $(this).val() == $(this).attr('data-default') )
        {
            // make the value blank
            $(this).val('');
        }

    // when you move out of the search input
    }).on('blur',function(e){

        // if there is no value (blank)
        if( !$(this).val() )
        {
            // add back the default value
            $(this).val( $(this).attr('data-default') );
        }
    });
});