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

Posted 2023-04-18

【中文标题】带有描述性文本的文本输入

【英文标题】：Text Input with descriptive text

【发布时间】：2010-10-11 01:32:20

【问题描述】：

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

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

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

我正在考虑绝对定位一个

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

你怎么看？这是严重误导吗？

【参考方案1】：

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

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

【讨论】：

不错的发现。这似乎最接近 Jim 正在寻找的东西 - 并且比我的 labels.js 建议更好，因为他可能根本不使用标签。

【参考方案2】：

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

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

它不会影响用户搜索“搜索”的能力。与尝试在输入上设置 <p> 或 <label> 元素相比，这是一种更简洁的方法。

编辑：您说的完全正确 - 删除每次点击的价值是糟糕的用户体验。这就是我快速回答的原因。 :) 更新为仅删除初始值。

【讨论】：

删除每次点击时的值与我有关...如果用户输入一点，然后点击退出并想再输入一些怎么办？此外，如果用户没有输入任何内容......我想把帮助文本放回去

@Jim，检查我的解决方案。虽然我没有测试它应该可以工作。

不不！每次点击都执行这个动作是极其短视的，也没有经过深思熟虑。

【参考方案3】：

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

基本上，html 5 支持输入元素的 placeholder 属性：

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

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

【参考方案4】：

多年来，一直有一个名为 labels.js 的流行“项目”，最初由 oldpup.net 的 Aaron Boodman 撰写。这个想法仍然存在，甚至存在jQuery version（演示#4）。

【参考方案5】：

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

在这种情况下，您可以在文本输入上使用背景图像。您可以在 CSS 中定义 :focus 不应该有背景，而 unfocused 应该有它。即使禁用了 javascript，此解决方案也有效。

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

【讨论】：

值得一提的是，不同的浏览器/操作系统有不同的字体渲染方法，如果你使用这种技术，你的占位符文本看起来会不一致。

【参考方案6】：

不久前我正在寻找这个解决方案，结果遇到了this

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

【讨论】：

我在几个网站上使用过这种方法，但由于某种原因它并不总是有效——我不知道为什么。

【参考方案7】：

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

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

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

【参考方案8】：

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