我想知道是否有一种简单的方法使用 javascript（包括我们在网站上使用的 JQuery）将描述性文本放入文本输入中，直到用户单击它来输入他们自己的文本。
例如，我想将“搜索”一词放在文本输入中（最好以比实际输入更浅的颜色），直到用户单击输入，然后它消失并允许他们输入搜索词。
我不想让“Search”这个词成为文本输入的值，因为用户可以搜索“search”这个词有点重要。
我正在考虑绝对定位一个
元素，并在输入上使用单词搜索并在单击它（或输入）时将其隐藏。
你怎么看？这是严重误导吗？
【问题讨论】：
标签： javascript jquery html usability textinput
我最近遇到了jQuery Form Example plugin，它可以满足您的需求。该项目的 github 页面是here。使用该插件，您可以显示一个占位符值，该值将在点击时消失：
$('input#search').example('Search');
【讨论】：
您可以将搜索输入的初始值设置为“搜索”，然后添加一个 onClick 监听器将其移除。
$("input.search-term").one("click", function() { $(this).removeAttr("value"); });
它不会影响用户搜索“搜索”的能力。与尝试在输入上设置 <p> 或 <label> 元素相比，这是一种更简洁的方法。
编辑：您说的完全正确 - 删除每次点击的价值是糟糕的用户体验。这就是我快速回答的原因。 :) 更新为仅删除初始值。
【讨论】：
您可能想检查一下： 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 的效果。
【讨论】：
多年来，一直有一个名为 labels.js 的流行“项目”，最初由 oldpup.net 的 Aaron Boodman 撰写。这个想法仍然存在，甚至存在jQuery version（演示#4）。
【讨论】：
虽然我不想让“Search”这个词成为文本输入的值，因为用户可以搜索“search”这个词有点重要。
在这种情况下，您可以在文本输入上使用背景图像。您可以在 CSS 中定义 :focus 不应该有背景，而 unfocused 应该有它。即使禁用了 javascript，此解决方案也有效。
更新：经过测试，可与 FF、Opera 和 Chrome 一起使用，但不适用于 IE，因为 IE 不支持 :focus，但 IE 支持背景图像，所以如果文本是浅灰色的，应该没有问题。并且您可以随时使用 jquery 来更改输入字段应具有的分类。
【讨论】：
不久前我正在寻找这个解决方案，结果遇到了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();
});
【讨论】：
我会在 jQuery 中做这样的事情：
$("input.searchterm").click(function() {
var $input = $(this);
if ($input.val() == "enter search term") $input.val("");
};
这样用户在再次点击时不会丢失他们之前输入的内容。只有当它是您分配给输入字段的默认值时，该值才会被清除。
【讨论】：
作为参考，这种技术通常称为水印。
【讨论】：