jQuery输入值焦点和模糊答案

【问题标题】：jQuery input value focus and blurjQuery输入值焦点和模糊
【发布时间】：2012-10-22 09:15:05
【问题描述】：

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

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

但是，这并不是我想要的。如果用户插入文本，我不希望默认文本覆盖用户输入的内容。我对 jQuery 也很陌生，因此我们将不胜感激。

【问题讨论】：

你想放置一个占位符吗？
在focus 上设置和取消设置defaultText... 时遇到问题，它将defaultText 值更改为输入的当前值。

标签： javascript jquery focus blur placeholder

【解决方案1】：

在您的focus() 方法中，您应该在清除它之前检查它是否等于defaultText，在您的blur() 函数中，您只需要在设置@987654326 之前检查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 中设置它。

【讨论】：

我无法在函数中设置defaultText，只是因为它会在很多地方使用，我不想让js文件变大。是否有任何解决方法，因为 atm 如果用户键入某些内容，然后再次单击输入，它会更改为 ''。
@Karl 这没有在函数中设置defaultText。您是否希望在加载表单时默认为输入的任何内容？
var defaultText = '您的默认文本。';确实如此。有不同的输入，每个都有不同的 defaultText。如果用户插入了某些内容并单击关闭，我需要它不清除输入，然后单击它。
@Karl 我刚刚更新了代码以获取初始值并使用 data() 将其保存到 DOM 对象 - 从那时起，它将此值称为“默认值”并将其设置为 @输入为空时为987654332@，如果相等则onFocus清零。
作为另一个提示，如果您不希望将其设置为初始值，您可以通过在输入中添加data-defaultValue="your text" 属性来设置它。

【解决方案2】：

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

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

【讨论】：

应该是 $(this).val() == 但是谢谢，我觉得有点愚蠢，没有想到这一点：P
是的，我在发布后立即注意到这一点，并在之后编辑了我的答案以修复它。希望这对您有用。

【解决方案3】：

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

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

【讨论】：