javascript textarea jQuery 上的默认文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4771794/
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
Default text on textarea jQuery?
提问by PHPLOVER
I have a textarea that i would like to show some default text on page load. Once the textarea is clicked i would like to have the text disappear and possibly if user clicked in textarea and did not type anything in and then clicked out of textarea the default text will show again.
我有一个 textarea，我想在页面加载时显示一些默认文本。单击 textarea 后，我希望文本消失，并且可能如果用户在 textarea 中单击并且没有输入任何内容，然后在 textarea 外单击，则默认文本将再次显示。
I have searched Google and on here but i can only seem to find tutorials relating to text boxes and NOTtextareas, plus i already am using a class on the textarea so cannot depend on class for it to work.
我在谷歌和这里搜索过，但我似乎只能找到与文本框相关的教程，而不是文本区域，而且我已经在文本区域上使用了一个类，所以不能依赖类来让它工作。
Does anyone have some simple jQuery code they would like to share with me to do what i want above?
有没有人有一些简单的 jQuery 代码他们想与我分享来做我上面想要的？
回答by Marcus Whybrow
DEMO:http://jsfiddle.net/marcuswhybrow/eJP9C/2/
演示：http : //jsfiddle.net/marcuswhybrow/eJP9C/2/
It is important to remember the edge case that the user types the value which is your default. My solution avoids this by giving each textareaan editedflag using jQuery's data()method.
重要的是要记住用户键入默认值的边缘情况。我的解决方案通过使用 jQuery 的方法给每个标志textarea一个edited标志来避免这种情况data()。
The HTML
HTML
Define the default value of the textareaas you would normally:
textarea像往常一样定义 的默认值：
<textarea>This is the default text</textarea>
The jQuery
jQuery
$('textarea').each(function() {
// Stores the default value for each textarea within each textarea
$.data(this, 'default', this.value);
}).focus(function() {
// If the user has NOT edited the text clear it when they gain focus
if (!$.data(this, 'edited')) {
this.value = "";
}
}).change(function() {
// Fires on blur if the content has been changed by the user
$.data(this, 'edited', this.value != "");
}).blur(function() {
// Put the default text back in the textarea if its not been edited
if (!$.data(this, 'edited')) {
this.value = $.data(this, 'default');
}
});
回答by Jacob Relkin
Simple enough:
足够简单：
$(function() {
$('textarea.autoDefault').focus(function() {
if($(this).val() === $(this).data('default') && !$(this).data('edited')) {
$(this).val('');
}
}).change(function() {
$(this).data('edited', this.value.length > 0);
}).blur(function() {
if($(this).val().length === 0) {
$(this).val($(this).data('default'));
}
}).blur(); //fire blur event initially
});
HTML markup:
HTML 标记：
<textarea class="autoDefault" rows="10" cols="25" data-default="some default text"></textarea>
jsFiddle example
jsFiddle 示例
回答by user2954658
"style='color:#888;' onfocus='inputFocus(this)' onblur='inputBlur(this)'"
^add that to your HTML element
^将其添加到您的 HTML 元素中
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
^add that to your document.ready function
^将其添加到您的 document.ready 函数中
I found that solution on SO a while ago and I haven't seen it done better
不久前我在 SO 上找到了该解决方案，但我没有看到它做得更好
回答by RichardTheKiwi
I have searched Google and on here but i can only seem to find tutorials relating to text boxes
我在谷歌和这里搜索过，但我似乎只能找到与文本框相关的教程
Whatever is used on a text-box can also be used on a textarea in jQuery. The val() method detects the control used and will use value attribute for input and inner text for textarea
在文本框上使用的任何内容也可以在 jQuery 中的文本区域上使用。val() 方法检测使用的控件并将使用 value 属性作为输入和文本区域的内部文本
Pick up any of those links and implement it
选择这些链接中的任何一个并实施它
回答by NycCompSci
Another way is to use HTML5's placeholder tag.
另一种方法是使用 HTML5 的占位符标签。
http://davidwalsh.name/html5-placeholder
http://davidwalsh.name/html5-placeholder
This probably is not supported in all browsers especially old IEs.
这可能不受所有浏览器的支持，尤其是旧的 IE。
