使用jQuery清除焦点输入并返回模糊

这几乎可行。 但是，当离开字段时出现“defaulttext”而不是原始文本值。 不确定如何最有效地回显defaultText中的变量。

 $（function（）{
     var defaultText = $（this）.val（）;
     $（'input [type = text]'）。focus（function（）{
       $（本）.VAL（ ''）;
       }）;
      $（'input [type = text]'）。blur（function（）{
       $（本）.VAL（ 'defaultText'）;
      回声 
       }）;
  }）;

Answer 1

$(function() { var input = $('input[type=text]'); input.focus(function() { $(this).val(''); }).blur(function() { var el = $(this); /* use the elements title attribute to store the default text - or the new HTML5 standard of using the 'data-' prefix ie: data-default="some default" */ if(el.val() == '') el.val(el.attr('title')); }); }); 

---

更新

浏览器逐步实现placeholder属性，该属性提供向用户显示“提示”的能力。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 2

您需要删除set方法（val）中defaultText变量周围的”标记。

尝试沿着线条的东西

 $(function() { var defaultText = ''; $('input[type=text]').focus(function() { defaultText = $(this).val(); $(this).val(''); }); $('input[type=text]').blur(function() { $(this).val(defaultText); // NB removed the ' ' marks //echo // What are you trying to echo? }); }); 

Answer 3

这个解决方案需要jQuery！

我将这个function包装在一个utils模块中，如下所示：

 var utils = (function () { var utils = {}; //some other properties... utils.setupAutoclearInputs = function() { $('.input-autoclear').each(function() { $(this).data('default', $(this).val()).addClass('gray'); }).focus(function(e) { if (!($(this).val() !== $(this).data('default'))) { $(this).removeClass('gray').addClass('black').data('modified', true).val(''); } }).blur(function(e) { if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') { $(this).removeClass('black').addClass('gray').val($(this).data('default')); } }); } //some other methods... return utils; }()); 

在HTML中：

添加： class="input-autoclear"到您希望包含的每个输入。

设置默认值：

为灰色和黑色文本或任何你想要的东西创建一些css类。

就个人而言，我正在使用.gray { ... }和.gray { ... } ，但你可能想要更好的名字。

最后：

使用以下方法触发utils模块方法：

 $(document).ready(function() { ... utils.setupAutoclearInputs(); ... } 

确保模块的代码位于document.ready调用之外，您可能希望它位于应用程序的全局范围内。

有关正确的javascript模块编写的更多信息，请访问此文章 。

Answer 4

这个将使用.data（）函数为您保存默认文本。 所以不需要额外的标记。

 $('input').focus(function() { if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val()); if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val(""); }).blur(function(){ if ($(this).val() == "") $(this).val($(this).data("DefaultText")); }); 

Answer 5

Simpl写$(this).val(defaultText):没有’s，否则它不会将它视为变量。

Answer 6

在每个输入标记上使用HTML5属性占位符 ，例如：

Answer 7

我把这段代码搞砸了一点。

 $(document).ready(function () { var defaultText = ''; $('.input-focus-clear').focus(function () { defaultText = $(this).val(); $(this).val(''); }); $('.input-focus-clear').blur(function () { var newText = $(this).val(); if (newText.length < 1) { $(this).val(defaultText); } }); }); 

Answer 8

在你的萤火虫中尝试这个：

 $(function() { console.log($(this)) }); 

你会发现的

 var defaultText = $(this).val(); 

可能不是你想要的。

如果输入的初始值是默认文本，请按以下方式获取：

 var defaultText = $('input[type=text]').val() 

请注意，只有在页面上只有一个输入文本时，这才能正常工作。

并删除引号：

 $(this).val('defaultText'); 

Answer 9

您没有引用变量defaultText 。 你传递一个字符串，因为它用引号括起来。

 $(function() { var defaultText = $('input[type=text]').val(); $('input[type=text]').focus(function() { $(this).val(''); }); $('input[type=text]').blur(function() { $(this).val(defaultText); // fixed! }); }); 

Answer 10

 var q = $('#q'); q.focus(function() { if ($(this).attr('data-default') == $(this).val()) { $(this).val(''); } }).blur(function() { if($(this).val() == '') { $(this).val($(this).attr('data-default')); } });  

Answer 11

  $('.myclass').each(function() { var default_value = this.value; $(this).css('color', '#666'); // this could be in the style sheet instead $(this).focus(function() { if(this.value == default_value) { this.value = ''; $(this).css('color', '#333'); } }); $(this).blur(function() { if(this.value == '') { $(this).css('color', '#666'); this.value = default_value; } }); });  

Answer 12

这很有效！ 我自己用它：

 /* Forminputs löschen und wiederherstellen */ jQuery(function() { var input = jQuery('#userForm input[type=text], #userForm textarea'); input.focus(function() { jQuery(this).attr('data-default', jQuery(this).val()); jQuery(this).val(''); }).blur(function() { var el = jQuery(this); if (el.val() == '') el.val(el.attr('data-default')); }); });