javascript - jQuery 输入值焦点和模糊

Question

我有以下代码，当用户选择一个输入框时，该值将消失，但一旦用户点击它，默认值将被重新插入。

        $(function() {
            var defaultText = '';
            $('input[id=input]').focus(function() {
                defaultText = $(this).val();
                $(this).val('');
            });
            $('input[id=input]').blur(function() {
                $(this).val(defaultText); 
             });
         });

然而，这并不是我想要的。如果用户插入文本，我不希望默认文本覆盖用户输入的内容。我也是 jQuery 的新手，所以非常感谢任何帮助。

Answer 1

在您的 focus() 方法中，您应该在清除它之前检查它是否等于 defaultText，在您的 blur() 中函数，您只需要在设置defaultText 之前检查val() 是否为空。如果您要使用多个输入，最好使用类而不是 ID，因此当类为“输入”时，您的选择器将是 input.input。即使它是一个 ID，您也可以将其引用为 input#input。

// run when DOM is ready()
$(document).ready(function() {
    $('input.input').on('focus', function() {
        // On first focus, check to see if we have the default text saved
        // If not, save current value to data()
        if (!$(this).data('defaultText')) $(this).data('defaultText', $(this).val());

        // check to see if the input currently equals the default before clearing it
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    });
    $('input.input').on('blur', function() {
        // on blur, if there is no value, set the defaultText
        if ($(this).val()=='') $(this).val($(this).data('defaultText')); 
    });
});

在 this jsFiddle 中将其付诸实践.