JQuery清空文本框当我点击它

如果我点击它来写东西，我该如何清空文本框（html表单）。JQuery清空文本框当我点击它

伪代码：

On click #searchform 
Erase String in #searchform

来源

2010-11-18 Tomkay

你为什么要这么做？如果您输入了错误的内容而只想编辑会怎么样？看起来你想要的是，如果文本字段包含原始文本（如：输入搜索词），那么点击时应该删除它。对？ – tbleckert 2010-11-18 08:38:48

@tbleckert的确。我认为这是一个标准的usabillity的东西..所以我需要一个条件分支，使用户不会生气.. – Tomkay 2010-11-18 08:40:47

为什么你不使用HTML 5的占位符属性？！ – 2010-11-18 08:49:05

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') { 
     $(this).data('original', $(this).val()).val(''); 
    } 
}); 

$('#searchform').blur(function() { 
    if ($(this).val() == '') { 
     $(this).val($(this).data('original')); 
    } 
});

编辑截至目前，你应该使用placeholder属性，如果你想使用上述作为缺少填充工具占位符支持。

if (!('placeholder' in document.createElement('input'))){ 
    $('input[placeholder]').each(function() { 
     $(this).placeholder(); 
    }); 
}

并将原始代码转换为一个插件，以方便使用（与一些小的mods）。

jQuery.fn.placeholder = function() { 
    return this.each(function() { 
     var value = $(this).attr('placeholder'); 
     jQuery(this).val(value).addClass('placeholder'); 
     jQuery(this).focus(function() { 
      if (jQuery(this).val() == value) { 
       jQuery(this).val('').removeClass('placeholder'); 
      } 
     }); 

     jQuery(this).blur(function() { 
      if (jQuery(this).val() == '') { 
       jQuery(this).val(value).addClass('placeholder'); 
      } 
     }); 
    }); 
};

来源

2010-11-18 08:42:18 tbleckert

以这种方式添加验证很困难。想象一下这个领域是必需的。然后所需的字段验证器必须排除初始值。另外想象一下，你想为占位符（或至少不同的颜色）使用不同的字体 - 那么你将不得不切换类。我认为'placeholder'属性是要走的路。 – 2013-04-17 06:39:37

嗯，是的，但这是在2010年，当占位符不是超级知名，并在浏览器中很好地实施。当然，现在是另一次了。但我应该更新我的答案。 – tbleckert 2014-01-09 12:28:43

$('#searchform').click(function() { $(this).val('') })

来源

2010-11-18 08:35:27 pestaa

如果你是想从现场清除默认值，如“输入搜索词”我使用下面的代码：

function clearText(thefield){ 
if (thefield.defaultValue==thefield.value) 
thefield.value = "" 
}

，然后在我的输入字段我补充一下：

onfocus="clearText(this)"

因此，这将是：

<input type="text" name="username" value="enter your name here" onfocus="clearText(this)">

来源

2010-11-18 08:46:18

你永远不应该使用内联js的人... – tbleckert 2010-11-18 08:47:13

对于事物的脚本方面来说很新颖，所以任何指针都会被大量接受，为什么我不应该这么做。只是分享我过去使用的解决方案来解决这个问题。 – 2010-11-18 08:55:22

谢谢你的支持文斯。：）我确定这工作正常，但代码可以用某种方式压缩。 – Tomkay 2010-11-18 08:57:23

我建议你使用HTML5占位符属性。例如：

<input type="text" placeholder="some default string if empty" />

这与大多数最新的浏览器和旧的工作有解决方法的jQuery插件。这里是链接到placeholder plugin。

然后你只需拨打：

$('input[placeholder]').placeholder();

来源

2010-11-18 08:46:56

占位符演示http://davidwalsh.name/dw-content/html5-placeholder.php在FF 3.5中不起作用 - 我不想为此使用额外的插件..以及我选择tbleckert的答案.. – Tomkay 2010-11-18 08:59:15

@Tomkay现在占位符是推荐的做事方式。您可以检测浏览器是否支持Modernizr，或者仅使用简单的javascript if。我想现在只有IE <= 8会使用polyfill。 – 2013-04-17 06:36:48

是的，我想现在HTML5已经足够流行以完成这项工作。我也在新项目上使用浏览器验证。 – Tomkay 2013-04-17 07:32:23

JQuery清空文本框当我点击它

回答

相关问题