Javascript 如何使文本框显示一个值，但单击时显示另一个值？

我希望有一个文本框，默认情况下包含类似“在此处输入文本”的内容，但当单击时，另一个单词将取代默认值

到目前为止，我只提供了显示默认值的代码：

<input type="text" name="phrase" value="Enter text here..." size="24" onfocus="if(this.value == 'Enter text here...') { this.value = ''; }" onBlur="if(this.value == '') {this.value='Enter text here...';}">

你是说像

$('input').focus(function(){
    $(this).val('New Text');
});
$('input').blur(function(){
    $(this).val('Default Text');
});

查看以下代码片段：

<input type="text" name="phrase" value="Enter text here..." size="24" onfocus="if(this.value == 'Enter text here...') { this.value = 'New Value goes here'; }" onBlur="if(this.value == '' || this.value == 'New Value goes here') {this.value='Enter text here...';}" onkeypress="if(this.value == 'New Value goes here') { this.value = ''; }" >



这就是你需要的。演示：
您应该使用
占位符
来显示焦点偏离的文本：

<input type="text" data-default="Default" placeholder="Enter text here..." />

这里有一个小问题：
使用jQuery，您可以使用.focusin（）事件处理程序来更改输入的值

它可以是这样的：

HTML:

JSFIDLE演示在这里使用.focusout（）也可以：
您现在拥有的将起作用，只需将onfocus函数中的空
'
替换为您希望替换的文本。我同意，不过应该注意的是，IE8/9不支持没有字符的输入占位符。因为它只是起作用，这并不能解释它为什么起作用。你能解释一下为什么你的答案是有效的吗？请考虑一些关于你的答案的信息，而不是简单地发布代码。我们努力提供的不仅仅是“修复”，而是帮助人们学习。您应该解释原始代码中的错误，您的不同做法，以及您的更改为何有效。如果您的老师/教授教了您一些东西，您希望得到澄清，并询问为什么它有效，您是否真的会接受“因为它有效”的回答作为满意答案？你宁愿听别人的话，也不愿自己真正理解别人的行为？为了帮助人们学习，你应该在发帖的同时做一些解释。这样，它就不鼓励在缺乏理解的情况下进行复制和粘贴。
$(funcion(){
  $(input).on('click', function(){
      var $this = $(this),
          defaultValue = $this.data('default');

    if(defaultValue) $this.val(defaultValue);
  })  
 });

<input type="text" id="mybox" name="phrase" value="Enter text here..." size="24"/>

$('#mybox').focusin(function() {
    $(this).val('your new text here');
});