Jquery/Javascript 文本框在输入内容时更改值，如果不集中则恢复答案

【问题标题】：Jquery/Javascript Textbox change value when typed something and revert if unfocusedJquery/Javascript 文本框在输入内容时更改值，如果不集中则恢复
【发布时间】：2013-02-05 08:38:03
【问题描述】：

我不知道我应该在这个网站或谷歌中寻找什么术语，如果我的问题有重复的主题，请原谅我。真的不知道该输入什么。

我会提供截图让你了解我的问题。

这是我的 文本框，上面有（可选）值。

当我将光标放在它上面时，文本框将处于焦点模式（当我点击它时它没有改变（可选）的值..

当我在文本框中输入内容时，（可选）值会消失，它会显示您正在输入的内容。

当我 [ hello 并将其完全删除时，我想要的输出（可选）将恢复到原来的样子。

长话短说，我有一个默认值为（可选）的文本框，当我在上面输入时，它会消失并显示您正在输入的内容，当我删除所有内容时，（可选）会回来。

我只是不知道如何开始。如果你能帮助我，我会很高兴。

【问题讨论】：

标签： javascript jquery html input

【解决方案1】：

现在有一个标准的 HTML 属性：placeholder。

<input name=somename placeholder="(optional)">

它是not yet universally supported，但我认为这是要走的路，即使有些用户在升级他们的 IE9 浏览器之前不会看到它，因为它会让你的页面更简单、更干净。

【讨论】：

【解决方案2】：

Yoy 可以按如下方式使用占位符，但它不适用于 ie 版本：

<input type="text" placeholder="(optional)">

因此您可以在文本字段上添加 javascript，如下所示：

<input type="text" value="(optional)" onfocus="if(this.value=='(optional)'){this.value=''}" onblur="if(this.value==''){this.value='(optional)'} />

【讨论】：

【解决方案3】：

您可以使用 JS var support_placeholder = "placeholder" in document.createElement('input'); 验证浏览器是否支持输入占位符，而不是在输入中包含 JS，然后调整您要使用的方法。

编辑：使用 jQuery 我会做这样的事情：

$(function(){
  if(!("placeholder" in document.createElement('input'))) {
    $('input').each(function(){
      var ph = $(this).attr('placeholder');
      $(this).val(ph);
      $(this).focus(function(){
        if($(this).val() == ph) { $(this).val(''); }
      }).blur(function(){
        if($(this).val() == '') { $(this).val(ph); }
      })
    })
  }
 })

你可以try it here 使用 Chrome，然后使用 IE8。

【讨论】：