javascript 占位符在 textarea 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18735863/
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
Place holder not working in textarea
提问by BigTech
I am using this code to display placeholder:
我正在使用此代码来显示占位符：
<input type="email" name="email" value="Email" onfocus="if(this.value=='Email')this.value='';" onblur="if(this.value=='')this.value='Email';">
<textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';"> </textarea>
Placeholder is displaying in input field, but not displaying in textarea.
占位符显示在输入字段中，但不显示在文本区域中。
Here is my page link where I am using this code. http://realinvestors.businesscatalyst.com/contact.html
这是我使用此代码的页面链接。 http://realinvestors.businesscatalyst.com/contact.html
回答by Ganesh Pandhere
When you are using placeholder for textarea, you should make sure that no value should be present in textarea. It also takes a blank space as a value for textarea which overrides the placeholder text.
当您为 textarea 使用占位符时，您应该确保 textarea 中不存在任何值。它还需要一个空格作为覆盖占位符文本的 textarea 的值。
I have checked your page in firebug and it has a space in that tag hence your placeholder will not work. But remove that space and keep placeholder in it. It will definitely work.
我已经在 firebug 中检查了您的页面，并且该标签中有一个空格，因此您的占位符将不起作用。但是删除该空间并将占位符保留在其中。它肯定会起作用。
回答by Kippie
A textarea's original value is based on the text between the opening and closing tag.
Make your textarea markup look like this and it should work:
<textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';">Message</textarea>
Atextarea的原始值基于开始和结束标记之间的文本。让你的 textarea 标记看起来像这样，它应该可以工作：
<textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';">Message</textarea>
As shadow pointed out, you should also take a look at the HTML5 placeholderattribute
正如 shadow 指出的那样，您还应该看看 HTML5placeholder属性
回答by Shadow
you can also try this, why that much of code
你也可以试试这个，为什么那么多代码
<textarea rows="4" cols="50" placeholder="Message here...">
</textarea>
回答by SpYk3HH
First Off, HTML5 fully supports the placeholderattribute for input && textarea.
首先，HTML5完全支持placeholder的属性input && textarea。
Secondly, for older versions, there is a very simple jQuery Plugin Herethat manages between HTML5 and other HTML's. In other words, if your browser supports HTML5, it won't do anything. Just use the placeholder attribute in your HTML markup and let the plugin do the work.
其次，对于旧版本，有一个非常简单的jQuery Plugin Here可以在 HTML5 和其他 HTML 之间进行管理。换句话说，如果您的浏览器支持 HTML5，它就不会执行任何操作。只需在 HTML 标记中使用占位符属性，让插件完成工作。
Third, if you're ever in question which value to pull on something like that, try using an orswitch, such as var val = $(this).val() || $(this).text(). Just note, this could lead to improper results if what you WANT is on other side of or, but the first evaluates true.
第三，如果您对使用哪个值产生疑问，请尝试使用or开关，例如var val = $(this).val() || $(this).text(). 请注意，如果您想要的东西在 or 的另一边，但第一个评估为真，这可能会导致不正确的结果。
Finally, If you don't want that plugin, I still suggest using the placeholderattribute and the following JavaScript:
最后，如果您不想要该插件，我仍然建议使用该placeholder属性和以下 JavaScript：
HTML
HTML
<textarea id="a" placeholder="text are text?"></textarea>
JS
JS
$(document).on('blur focus', '[placeholder]', function(e) {
var val = $.trim($(this).val() || $(this).text()), // remove use of .trim here if you WANT to ALLOW text are to be a blank space like " "
placeHolder = $(this).prop('placeholder');
switch(e.type) {
case 'focusin':
if (val == placeHolder) $(this).val('').text('');
break;
case 'focusout':
if (val == '') $(this).val(placeHolder).text(placeHolder);
break;
}
});
// the following will make sure all fields having placeholder will start with placeholder in place
$('[placeholder]').each(function(i) { $(this).text($(this).prop('placeholder')); });
See Working Example Here
请参阅此处的工作示例
NOTE
I dont think $(this).val() || $(this).text()might work in some older versions of IE, thus you may need to actually distinguish, thus writing a longer if statement. I simply sought to show shortest answer here. If you need more cross browser compatibility to OLDER browsers, I really suggest the Pluginthat has already done all of this work for you.
注意
我不认为$(this).val() || $(this).text()可能在某些旧版本的 IE 中工作，因此您可能需要实际区分，从而编写更长的 if 语句。我只是想在这里展示最短的答案。如果您需要对旧浏览器的更多跨浏览器兼容性，我真的建议您使用已经为您完成所有这些工作的插件。
回答by elon
Use just this:
只用这个：
<textarea placeholder="Message"></textarea>
and remember not to put anything (even white space) between textarea tag. It's as simple :)
并记住不要在 textarea 标签之间放置任何东西（甚至是空格）。就这么简单:)
回答by lfender6445
For IE 11 users
对于 IE 11 用户
In IE11 my textarea was rendering the placeholder text as innerhtml, here is one way you can work around the issue
在 IE11 中，我的 textarea 将占位符文本呈现为 innerhtml，这是您可以解决此问题的一种方法
// IE 11 Hack
handleTextAreaClick(event) {
if (event.currentTarget.innerHTML === event.currentTarget.placeholder) {
event.currentTarget.innerHTML = ''
}
}
Not the most elegant of solutions but it works for my case. The problem was that IE treats placeholder text as innerHTML - more info here
不是最优雅的解决方案，但它适用于我的情况。问题是 IE 将占位符文本视为 innerHTML - 此处有更多信息
