1

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

我将提供屏幕截图让您了解我的问题。

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

我只是对如何开始没有任何想法。如果你能帮助我，我会很高兴。

4

3 回答 3

6

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

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

它还没有得到普遍支持，但在我看来，这是要走的路，即使有些用户在升级他们的 IE9 浏览器之前不会看到它，因为它会让你的页面更简单、更干净。

于 2013-02-05T08:39:03.737 回答
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)'} />
于 2013-02-05T08:46:48.387 回答
1

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

编辑：使用 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); }
      })
    })
  }
 })

例如，您可以在此处使用 Chrome 进行尝试，然后使用 IE8。

于 2013-02-05T08:56:28.750 回答