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

Question

这个问题已经有答案了:

How to put a text watermark in a password field? (9 个回答)

已关闭 9 年前。

我想要一个文本框，默认情况下包含“在此处输入文本”之类的内容，但单击时，另一个单词会取代默认值的位置。

到目前为止，我只包含显示默认值的代码:

<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...';}">

Answer 1

您应该对焦点消失的文本使用占位符:

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

我使用 data-default 来保存将替换占位符的默认值

鉴于此，下面的代码将输入的值设置为 data-default:

$(funcion(){
  $(input).on('click', function(){
      var $this = $(this),
          defaultValue = $this.data('default');

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

这是一个 fiddle :http://jsfiddle.net/z4mhqgjg/