优化此Javascript代码

我想知道是否有办法提高代码的效率，我正在努力改进我自己的代码，但我觉得我需要反馈，这部分：

$(function(){
    $('#buscar').focus(function(){
        if(($(this).val() === '') || ($(this).val() === ' ') || ($(this).val() === 'Buscar...'))
            $(this).val('');
    }).change(function(){
        if(($(this).val() === '') || ($(this).val() === ' ') || ($(this).val() === 'Buscar...'))
            $(this).css({'color':'#999999'});
        else
            $(this).css({'color':'#000000'});
    }).blur(function(){
        if(($(this).val() === '') || ($(this).val() === ' '))
           $(this).val('Buscar...');
    });
});

---

我会选择下面的代码。它隔离您需要的函数（测试空字符串，或测试无值或占位符文本）。另外，我不认为

change

功能是更改颜色的正确位置；相反，它应该位于

焦点

和

模糊

功能中，您也可以在其中更改值

另外，如果您只是在为输入字段寻找占位符方法，那么已经为您制作了许多占位符方法，您可以在其中设置文本和CSS样式。此外，HTML5有一个用于此目的的

占位符

属性-请参阅。一些更好的占位符插件甚至使用HTML5，如果不支持的话，可以使用JS

无论如何，代码如下：

$.fn.isValBlank = function() {
    return $.trim($(this).val()) == "";
};

$.fn.isInputBlank = function() {
    return (($(this).isValBlank() || ($(this).val() === 'Buscar...'));
};

$(function(){
    $('#buscar').focus(function(){
        var val = $(this).val();
        if ($(this).isInputBlank()) {
            $(this).val('');
            $(this).css({'color':'#000'});
        }
    });

    $('#buscar').blur(function(){
        if ($(this).isValBlank()) {
            $(this).css({'color':'#999'});
            $(this).val('Buscar...');
        }
    });
});

---

如果它是未来，HTML5无处不在，或者如果每个人都只使用当前版本的Safari、Chrome和Firefox，那么你可以删除大部分代码，并用以下代码替换：

<input name="something" id="buscar" placeholder="Buscar...">

如果你需要做很多事情，你可以考虑jQuery。它使用了

占位符

属性，因此对HTML5很友好

---

另外，

由于@deceze的洞察力，我建议将大部分逻辑分解为单个函数。基本上，所有这些条件都在检查字段是否为空

此外，我还添加了一个检查任何类型的空格，因为单个

“

与两个空格

”

一样不相关

function isTextFieldEmpty(text, placeholder) {
    var onlyWhitespace = /^\s+$/;
    return (text == "" || onlyWhitespace.test(text) || text == placeholder);
}

然后，您可以对所有事件重复使用此函数-

焦点

，

模糊

，

更改

function isTextFieldEmpty(text, placeholder) {
    var onlyWhitespace = /^\s+$/;
    return (text == "" || onlyWhitespace.test(text) || text == placeholder);
}

$(function() {

    // to avoid repeating this text everywhere..
    var placeholder = 'Buscar...';

    $('#buscar').focus(function() {
        if (isTextFieldEmpty(this.value, placeholder)) {
            $(this).val('');
        }
    });

    $('#buscar').blur(function() {
        if (isTextFieldEmpty(this.value, placeholder)) {
            $(this).val(placeholder);
        }
    });

    $('#buscar').change(function() {
        if (isTextFieldEmpty(this.value, placeholder)) {
            $(this).css({ color: '#999' });
        }
        else {
            $(this).css({ color: '#000' });
        }
    });

});

已编辑：重写代码以添加来自“Mohan Ram”（多事件绑定）的idear 备注: 如果您愿意，也可以不使用“iif”扩展名来使用此代码。 那么你必须写：

if((event.type === 'focus' || event.type === 'change') && $this.isEdited('Buscar...'))

可由JavaScript访问的HTML属性。当谈到占位符文本输入值时，您可以使用它来帮助使代码更加可重用。这并不完美，但

$(function(){

    $("input[type='text']").focus(textInputFocusHandler).change(textInputChangeHandler).blur(textInputBlurHandler);

});

function hasUserValue(textInput) {
    return (textInput.value!=textInput.defaultValue && /^\s+$/.test(textInput.value)==false && textInput.value!=="");
}

function textInputFocusHandler(event) {
    if(!hasUserValue(event.target)) event.target.value = "";
}

function textInputChangeHandler(event) {
    if(!hasUserValue(event.target)) event.target.style.color = "#999";
    else event.target.style.color = "#000";
}

function textInputBlurHandler(event) {
    if(!hasUserValue(event.target)) event.target.value = event.target.defaultValue;
}

我认为这是以优化的方式编写代码的最简单方法

快速优化：

$(function(){
$('#buscar').focus(function(){
    var t = $(this);
        var v = $.trim(t.val());
 if(v === '' || 'Buscar...'){
    $(this).val('');
        }
}).change(function(){
    var t = $(this);
        var v = $.trim(t.val());
 (v === '' || 'Buscar...' ? t.css({'color':'#999999'}) : t.css({'color':'#000000'}))
}).blur(function(){
    var t = $(this);
        var v = $.trim(t.val());
    if(v === '')
       t.val('Buscar...');
});
});

---

你在这里试图优化什么？不要重复那么多次相同的if语句，我在我的所有代码中都这么做了=/我是否正确地收集到你试图为搜索字段实现占位符/水印脚本？你为什么要检查

='

，一个空间有什么特别之处？是的，我是=），你注意到了，我真的很感动哈哈当人们发送单个空间时，我遇到了麻烦，这就是为什么如果他们将其留空，我只会用默认的againouché@deceze填充它-你会说西班牙语吗？+1非常好的主意。我已经改变了我的答案，以反映这一点，并展示了一个样本

$(function(){
    $('#buscar').bind('focus change blur' , function(){
  //write ur codes here
});

$(function(){
$('#buscar').focus(function(){
    var t = $(this);
        var v = $.trim(t.val());
 if(v === '' || 'Buscar...'){
    $(this).val('');
        }
}).change(function(){
    var t = $(this);
        var v = $.trim(t.val());
 (v === '' || 'Buscar...' ? t.css({'color':'#999999'}) : t.css({'color':'#000000'}))
}).blur(function(){
    var t = $(this);
        var v = $.trim(t.val());
    if(v === '')
       t.val('Buscar...');
});
});