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()
仅从DOM中选择$('input[type=text]')一次。您可以对jQuery对象进行链接方法调用。
请勿使用.val()获取value输入的defaultValue和text。它们可以直接从元素的属性名称访问，并具有完全跨浏览器兼容性。
如果您愿意，可以将选择器从'input[type=text]'缩短为'input:text'

编辑：删除了一只迷路)。

此外，根据@jAndy's建议，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;
    });
});

编辑：将其更改为@jAndy最初建议使用$.trim()，因为+在输入为"0"时会产生不正确的结果，或者比如" 0 "。

Answer 2

只想分享我昨天写的相同功能。

不同之处在于它会使默认文本变灰，选择全部焦点，更改文本颜色，主要是：它在加载时设置默认文本（显然在$（func）内部折腾

  $('input:text').each(function(){
        $(this).val($(this).attr('placeholder')).css('color','#999');
        $(this).focus(function(){
            // If value is same as 'placeholder', clear field
            if(this.value == $(this).attr('placeholder')
                && $(this).css("color") == 'rgb(153, 153, 153)'){
                $(this).val('').css('color','#000');
            } else { // Else select the whole text (one less click)
                $(this).select();
            }
        });
        $(this).blur(function(){
            // On blur, if empty field, put placeholdr back
            if (!$.trim( this.value)){
                $(this).val($(this).attr('placeholder')).css('color','#999');
            }
        });
    });

我确信它可以做得更好，但效果很好。

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

2 个答案: