如果在jquery，输入字段中为空，则删除/添加onfocus / onblur上的值

Question

我知道这方面存在很多问题，但我不知道该搜索什么。

我有一个电子邮件字段，我希望它有“在此处写邮件”，当您点击/执行onfocus时，它应该会消失。虽然如果你没有写东西并且继续写它，它应该再次出现。

Answer 1

1。标记

<input id="email" name="email" type="text" value="Write your email here" />

2。 jQuery的

$('#email')
  .on('focus', function(){
      var $this = $(this);
      if($this.val() == 'Write your email here'){
          $this.val('');
      }
  })
  .on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          $this.val('Write your email here');
      }
  });​

3。演示

jQuery input placeholder

Answer 2

您应该使用HTML5占位符，并为旧版浏览器使用jquery插件 http://diveintohtml5.ep.io/forms.html

此处运行示例：
http://jsfiddle.net/AamkB/

占位符有很多jquery插件，我使用了这个插件：
http://webcloud.se/code/jQuery-Placeholder/

Answer 3

你不需要任何JS。只需在placeholder="Write your email here."代码中使用<input>。

如果您需要支持IE，请添加http://webcloud.se/code/jQuery-Placeholder/以使其在那里工作。

Answer 4

您可以使用内联JavaScript标记onblur / onfocus。也许不是最“干净”的HTML代码，但它肯定适用于所有浏览器！ （没试过IE5.5 / 6.0，但嘿，现在谁在使用这些老歌？！^ _ ^）

<input type="text" name="aSweetInputField" value="Your textfield value" 
class="anyClass"  onclick="if (this.defaultValue==this.value) this.value=''" 
onblur="if (this.value=='') this.value=this.defaultValue">

就是这样！

Answer 5

<input type="text" 
onfocus="if($(this).val() == 'Write your email here') $(this).val('')" onblur="if($(this).val() == '') $(this).val('Write your email here')" 
value="Write your email here"> 

你去。

Answer 6

这应该适用于全局表单，只需在输入的value属性中初始定义值。

<input type="text" name="example" value="example text"> 
<textarea name="exampleTextArea" value="example text in textarea"> 

var el = $('input[type=text], textarea');
    el.focus(function(e) {
        if (e.target.value == e.target.defaultValue)
            e.target.value = '';
    });
    el.blur(function(e) {
        if (e.target.value == '')
            e.target.value = e.target.defaultValue;
});