如何改进这个基本的jQuery代码？

Question

我刚开始用一些基本的jQuery弄脏手.我希望能够在任何文本框中添加"defaultValue"属性,然后在焦点上清除该框,然后如果值为空,则将默认值重新插入文本框.我已经提出了一个基本的功能来做到这一点,但有更好的方法吗？我似乎记得看到一些jQuery函数的例子,它们不依赖于两个独立的方法......

$(document).ready(function () {
        $('input[type=text]').click(function () {
            var defaultValue = $(this).attr('defaultValue');
            if ($(this).val() == defaultValue)
                $(this).val('');
        });
        $('input[type=text]').blur(function () {
            var defaultValue = $(this).attr('defaultValue');
            if ($(this).val() == '')
                $(this).val(defaultValue);
        });
    });

Answer 1

$(function () {
    $('input[type=text]').focus(function () {
        if (this.value == this.defaultValue)
            this.value = '';
    })
     .blur(function () {
        if ( !$.trim( this.value ) )
            this.value = this.defaultValue;
    });
});

• 使用$(function() { });快捷方式.ready()

• 用.focus()而不是.click()

• 只$('input[type=text]')从DOM中选择一次.您可以对jQuery对象进行链接方法调用.

• 不要使用.val()来获取value和defaultValue一个的text输入.它们可以直接从元素的属性名称访问,具有完全跨浏览器兼容性.

• 如果您愿意,可以将选择器缩短'input[type=text]'为'input:text'

编辑:删除了一个流浪者).

此外,根据@ jAndy的建议,事件if()语句中的表达式blur已更改为测试仅包含空格字符的字符串.我使用一元运算+符来做到这一点.jAndy建议的另一种方法是使用 [using] jQuery的$.trim()方法.

如果您想为两个事件都使用单个函数,则可以执行以下操作:

$(function () {
    $('input[type=text]').bind('focus blur', function ( e ) {
        if (e.type === 'focus' && this.value == this.defaultValue)
            this.value = '';
        else if (e.type === 'blur' && !$.trim( this.value ) )
            this.value = this.defaultValue;
    });
});

编辑:将其更改$.trim()为@jAndy最初建议使用,因为+当输入"0"或类似时,将给出不正确的结果" 0 ".