10

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

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

然而，这并不是我想要的。如果用户插入文本，我不希望默认文本覆盖用户输入的内容。我对 jQuery 也很陌生，所以任何帮助都将不胜感激。

4

3 回答 3

20

在您的方法中，您应该在清除它之前focus()检查它是否等于，而在您的函数中，您只需要在设置. 如果您要使用多个输入，最好使用类而不是 ID，因此您的选择器将是当类为“输入”时。即使它是一个 ID，您也会将其引用为.defaultTextblur()val()defaultTextinput.inputinput#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')); 
    });
});

在这个 jsFiddle中设置它。

于 2012-11-01T18:03:50.680 回答
1

在您的模糊处理程序中，只需检查用户是否没有写任何东西，在这种情况下放回默认文本，如下所示：

         $('input[id=input]').blur(function() {
            if ($(this).val() == '') {
                $(this).val(defaultText); 
            }
         });
于 2012-11-01T18:04:48.977 回答
0

一个老问题 + 我不喜欢人们提供另一种解决方案而不是解决我的问题，但尽管如此：使用带有 jQ​​uery 插件的 HTML 占位符属性可以解决问题。

您还可以使用 HTML 数据属性并从中写入/读取。

于 2016-03-02T13:56:52.773 回答