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

StackOverflow https://stackoverflow.com/questions/607124

题

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

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

我不想让“搜索”这个词成为文本输入的值，因为用户可以搜索单词搜索有点重要。

我在考虑绝对定位<！> lt; p <！> gt;元素用单词搜索输入并在单击它（或输入）时隐藏它。

你怎么看？这可怕的误导了吗？

有帮助吗？

解决方案

我最近碰到了 jQuery Form Example插件，它可以满足您的需求。该项目的github页面是此处。使用该插件，您可以显示一个占位符值，该值将在点击时消失：

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

其他提示

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

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

它不会影响用户搜索<！>搜索的能力。<！>;这比尝试在输入上输入<p>或<label>元素更简洁。

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

你可能想看看这个： http://www.newmediacampaigns.com/page/nmcformhelper

基本上， HTML 5 支持<输入元素的strong>占位符属性：

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

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

多年来一直有一个流行的<！>项目<！>;称为 labels.js ，由orignally撰写老youngpup.net的Aaron Boodman。这个想法仍然存在，甚至存在 jQuery版本（演示＃4）。

  

我不想让“搜索”这个词成为文本输入的值，因为用户可以搜索单词搜索有点重要。

在这种情况下，您可以在文本输入上使用背景图像。您可以在CSS中定义：焦点不应该具有背景，并且不应该具有背景。即使禁用了javascript，此解决方案仍然有效。

更新：测试并使用FF，Opera和Chrome而不是IE，因为IE不支持：焦点，但IE支持背景图像，所以如果文本是浅灰色应该不是问题。并且您总是可以使用jquery来更改输入字段应该具有的内容。

我不久前正在寻找这个解决方案并且来到了此 

/**
* @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();
});

我会在jQuery中做这样的事情：

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

这样，用户在再次点击时不会丢失先前输入的内容。只有当它是您分配给输入字段的默认值时，才会清除该值。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top