jQuery输入值焦点和模糊

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

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

但是，这不完全是我想要的。如果用户插入文本，我不希望默认文本覆盖用户放置的内容。我也是相当新的jQuery，所以任何帮助将不胜感激。

来源

2012-11-01 Karl

你想放置占位符吗？ – nicooga

您在设置和取消设置'defaultText'时都存在问题...在'focus'上，它会将'defaultText'值更改为当前输入值。 – doublesharp

在你focus()方法你应该检查，看它是否清除之前等于defaultText，并在blur()功能，你只需要检查val()是设置defaultText之前空。如果您要使用多个输入，最好使用类而不是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的行动。

来源

2012-11-01 18:03:50 doublesharp

我无法在函数中设置defaultText，因为它将在很多地方使用，我不想让js文件变大。是否有任何解决方法，因为atm如果用户键入某个内容，然后再次单击该输入，则会将其更改为“'。 – Karl

@Karl这不会在函数中设置'defaultText'。您希望默认值是表单载入时的输入值吗？ – doublesharp

var defaultText ='您的默认文本。';它的确如此。有不同的输入，每个都有不同的defaultText。我需要它不清除输入，如果用户已经插入一些东西，并点击关闭，然后点击它。 – Karl

在您的模糊处理程序只是检查，如果用户没有写东西了，在这种情况下放回默认的文本，像这样：

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

来源

2012-11-01 18:04:48 Nelson

应该是$（this）.val（）==但是，谢谢，我觉得有点愚蠢，因为没有想到这一点：P – Karl

是的，我注意到，发布后，编辑我的答案后修复它。希望这对你有用。 – Nelson

一个老问题+我不喜欢它，当人们提供了另一种解决方案，而不是解决我的问题，但仍然：与jQuery插件使用HTML占位符属性将解决此问题。

您也可以使用HTML数据属性并从中读写。

来源

2016-03-02 13:56:52 Wancieho

jQuery输入值焦点和模糊

回答

相关问题