带有描述性文本的文本输入

Question

我想知道是否有一种简单的方法可以使用 javascript（包括我们在网站上使用的 JQuery）将描述性文本放入文本输入中，直到用户单击它来输入自己的文本。

例如，我想将“搜索”一词放入文本输入中（最好使用比实际输入更浅的颜色），直到用户单击输入，当它消失并允许他们输入搜索词时。

不过，我实际上并不希望“搜索”一词成为文本输入的值，因为用户可以搜索单词“搜索”有点重要。

我正在考虑绝对定位

在输入上包含单词搜索的元素，并在单击它（或输入）时将其隐藏。

你怎么认为？ 这是严重的误导吗？

Answer 1

我最近遇到了 jQuery 表单示例插件，它正是您想要的。 该项目的 github 页面位于此处。 使用该插件，您可以显示一个占位符值，该值将在单击时消失：

$('input#search').example('Search');

Answer 2

您可以将搜索输入的初始值设置为“搜索”，然后添加 onClick 侦听器以将其删除。

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

不会影响用户的搜索“搜索”的能力。 与尝试在输入上欺骗

或 元素相比，这是一种更简洁的方法。

编辑：你们都绝对正确 - 删除每次点击的价值是糟糕的用户体验。 这就是我快速回答的结果。 :) 更新为仅删除初始值。

Answer 3

您可能想检查一下：
http://www.newmediacampaigns.com/page/nmcformhelper

基本上，HTML 5 支持输入的 placeholder 属性elements：

<input type="text" placeholder="Your browser supports placeholder text" size=38>

WebKit（Chrome 和 Safari）现在支持此功能，但对于 Firefox 和 IE 等其他浏览器，当浏览器不支持 HTML 5 功能时，您可以使用此脚本使用 Javascript 来模拟效果。

Answer 4

多年来，有一个名为 labels.js，最初由老 youngpup.net 的 Aaron Boodman 编写。 这个想法仍然存在，甚至存在一个 jQuery 版本（演示#4）。

Answer 5

尽管如此，我实际上并不希望“搜索”一词成为文本输入的值，因为用户可以搜索单词“搜索”有点重要。

在这种情况下，您可以在文本输入上使用背景图像。 您可以在 CSS 中定义：焦点不应该有背景，而未聚焦的应该有背景。 即使禁用 javascript，此解决方案也能工作。

更新：已测试并适用于 FF、Opera 和 Chrome，但不适用于 IE，因为 IE 不支持 :focus，但 IE 支持背景图像，所以如果文本是浅灰色的，应该不是问题。 您始终可以使用 jquery 来更改输入字段应具有的类别。

Answer 6

我不久前一直在寻找这个解决方案，并遇到了这个

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
*/

(function ($) {

$.fn.hint = function (blurClass) {
  if (!blurClass) { 
    blurClass = 'blur';
  }

  return this.each(function () {
    // get jQuery version of 'this'
    var $input = $(this),

    // capture the rest of the variable to allow for reuse
      title = $input.attr('title'),
      $form = $(this.form),
      $win = $(window);

    function remove() {
      if ($input.val() === title && $input.hasClass(blurClass)) {
        $input.val('').removeClass(blurClass);
      }
    }

    // only apply logic if the element has the attribute
    if (title) { 
      // on blur, set value to title attr if text is blank
      $input.blur(function () {
        if (this.value === '') {
          $input.val(title).addClass(blurClass);
        }
      }).focus(remove).blur(); // now change all inputs to title

      // clear the pre-defined text when form is submitted
      $form.submit(remove);
      $win.unload(remove); // handles Firefox's autocomplete
    }
  });
};

})(jQuery);


$(function(){ 
    // find all the input elements with title attributes
    $('input[title!=""]').hint();
});

Answer 7

我会在 jQuery 中做类似的事情：

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

这样用户再次单击时就不会丢失之前输入的内容。 仅当该值是您分配给输入字段的默认值时才会被清除。

Answer 8

作为参考，这种技术通常称为水印。