我想知道是否有一种简单的方法可以使用javascript(包括我们在网站上使用的JQuery)将描述性文本放入文本输入中,直到用户点击它来输入他们自己的文本。
例如,我想将“搜索”这个词放在文本输入中(最好是比实际输入颜色浅),直到用户点击输入,当它消失并允许他们输入搜索词时。
我不想让“搜索”这个词成为文本输入的值,因为用户可以搜索单词搜索有点重要。
我在考虑绝对定位< p>元素用单词搜索输入并在单击它(或输入)时隐藏它。
你怎么看?这可怕的误导了吗?答案 0 :(得分:9)
我最近碰到了jQuery Form Example plugin,它正是你想要的。该项目的github页面是here。使用该插件,您可以显示一个占位符值,该值将在点击时消失:
$('input#search').example('Search');
答案 1 :(得分:4)
您可以将搜索输入的初始值设置为“搜索”,然后添加onClick侦听器以将其删除。
$("input.search-term").one("click", function() { $(this).removeAttr("value"); });
它不会影响用户搜索“搜索”的能力。这比尝试在输入上搜索<p>
或<label>
元素更简洁。
编辑:你们都是绝对正确的 - 删除每次点击的价值都是糟糕的用户体验。这就是我快速回答的问题。 :)更新为仅删除初始值。
答案 2 :(得分:3)
你可能想看看这个: http://www.newmediacampaigns.com/page/nmcformhelper
基本上,HTML 5支持输入元素的占位符属性:
<input type="text" placeholder="Your browser supports placeholder text" size=38>
WebKit(Chrome和Safari)现在支持此功能,但对于Firefox和IE等其他浏览器,当浏览器不支持HTML 5功能时,您可以使用此脚本模拟使用Javascript的效果。
答案 3 :(得分:1)
多年来,有一个名为 labels.js 的流行“项目”,由旧的youngpup.net的Aaron Boodman撰写。这个想法仍然存在,并且存在jQuery version,甚至(演示#4)。
答案 4 :(得分:1)
我不想让“搜索”这个词成为文本输入的值,因为用户可以搜索单词搜索有点重要。
在这种情况下,您可以在文本输入上使用背景图像。您可以在CSS中定义:焦点不应该具有背景,并且不应该具有背景。即使禁用了javascript,此解决方案仍然有效。
更新:测试并使用FF,Opera和Chrome而不是IE,因为IE不支持:焦点,但IE支持背景图像,所以如果文本是浅灰色应该不是问题。并且您总是可以使用jquery来更改输入字段应该具有的内容。答案 5 :(得分:1)
我不久前正在寻找这个解决方案并且来到了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();
});
答案 6 :(得分:0)
我会在jQuery中做这样的事情:
$("input.searchterm").click(function() {
var $input = $(this);
if ($input.val() == "enter search term") $input.val("");
};
这样,用户在再次点击时不会丢失先前输入的内容。只有当它是您分配给输入字段的默认值时,才会清除该值。
答案 7 :(得分:0)
作为参考,此技术通常称为水印。