jQuery 向 HTML 表单字段添加输入提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6047943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding input prompts to HTML form fields
提问by Yarin
I'm looking for a good way to add input prompts to my HTML form fields- The same way StackOverflow uses light gray text as prompts within all of its text fields.
我正在寻找一种将输入提示添加到我的 HTML 表单字段的好方法 - StackOverflow 使用浅灰色文本作为其所有文本字段中的提示的方式相同。
Figured there would be a jQuery plugin out there, but so far haven't found anything good. Anybody?
原以为那里会有一个 jQuery 插件，但到目前为止还没有找到任何好的东西。有人吗？
回答by Naftali aka Neal
See the answers to this question: Jquery default value in password field
请参阅此问题的答案：密码字段中的 Jquery 默认值
In html5 you can do this:
在 html5 中你可以这样做：
<input type="text" placeholder="Default Value"/>
This is what SO does if you view the search bar on top:
如果您查看顶部的搜索栏，这就是 SO 所做的：
<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="140" size="28" value="search">
回答by Paul D. Waite
If you mean having light grey text inside the form field, you can use the placeholderattribute in recent browsers:
如果您的意思是在表单字段中使用浅灰色文本，则可以placeholder在最近的浏览器中使用该属性：
<input type="text" placeholder="This text will appear inside the form field until the user focuses it">
I don't know of any packaged jQuery plug-ins that mimic this functionality in browsers that don't support placeholder, but here's an example of how to do it yourself in jQuery:
我不知道有任何打包的 jQuery 插件在不支持 的浏览器中模仿此功能placeholder，但这里有一个如何在 jQuery 中自己完成的示例：
回答by Shaoz
You can use either HTML5 or javascript/jquery.
您可以使用 HTML5 或 javascript/jquery。
HTML5:
HTML5：
<input type="text" placeholder="The text box" />
jquery:
查询：
var textbox = $('input:text');
// Use external css. This is just for example purposes
textbox.css({ color: '#bbb' }).val('the text box');
textbox.focus(function(){
var that = $(this);
that.removeAttr('style');
that.val(''); // Empty text box
}).blur(function(){
var that = $(this);
that.css({ color: '#bbb' }); // Use external css
$(this).val('the text box'); // Refill it
});
回答by Harry B.
I was having the same issues but using IE 8 didn't allow me the option of HTML 5 I used the following code that was inspired by Kyle Schaeffer.
我遇到了同样的问题，但使用 IE 8 不允许我选择 HTML 5 我使用了以下受 Kyle Schaeffer 启发的代码。
$.fn.fieldPrompt = function () {
/*Add the two CSS elements to the application css file. They control the wrapping element and the prompt element
.prompt_element {display:inline-block; position:relative; }
.prompt_element .prompt_field {display:inline-block; color:#888; font-style:italic; position:absolute; left:5px; top:2px; }*/
var $this = $(this);
$('input[type=text][title],input[type=password][title],textarea[title]', $this).each(function (i) {
if ($(this).parent().hasClass('prompt_element') == false) { //if prompt already exists then skip
$(this).wrap('<div class="prompt_element" ></div>'); //wrap the element with the prompt element
_promptfieldClassName = 'prompt_' + $(this)[0].uniqueID;
var _promptfield = '<div class="prompt_field ' + _promptfieldClassName + '" >' + $(this).attr('title') + '</div>' //Create the prompt field
$(this).before(_promptfield) // Add the prompt field to the Prompt element. The
if ($.trim($(this).val()) != '') { //Check if the field has a value
$(this).prev().hide(); //Hide the prompt if field has a value
};
$('.prompt_field').focus(function () { //If the prompt field get the focus - move to the next field which should be the input
$(this).next().focus();
});
$(this).on('keypress paste', function () { //If field has keypress or paste event was triggered
$(this).prev().hide(); //hide the prompt field
});
$(this).blur(function () { //If leaving the field element
if ($.trim($(this).val()) == '') { //Check if the value is empty
$(this).prev().show(); //Show the prompt
}
else {
$(this).prev().hide(); //Hide the prompt. This can be initiated by other events if they fill the field.
}
});
};
});
return $(this);
}
}
When using the Jquery autocomplete function I only had to add in $(this).blur(); statement on the change option function. This ensured the blur event was triggered after all other autocomplete events were finished to ensure a check on the field was done for resetting the prompt if needed.
使用 Jquery 自动完成功能时，我只需要添加 $(this).blur(); 关于更改选项功能的声明。这确保了在所有其他自动完成事件完成后触发了模糊事件，以确保在需要时对字段进行检查以重置提示。
$(...).autocomplete({change:function(){ $(this).blur(); }})
