Question

我正在使用此代码显示占位符：

 <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>

占位符显示在输入字段中，但不显示在textarea中。

这是我使用此代码的页面链接。 http://realinvestors.businesscatalyst.com/contact.html

Answer 1

textarea的原始值基于开始和结束标记之间的文本。让你的textarea标记看起来像这样，它应该工作： <textarea onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';">Message</textarea>

正如影子所指出的那样，您还应该看一下HTML5 placeholder属性

Answer 2

当您使用textarea的占位符时，您应确保textarea中不应存在任何值。它还需要一个空格作为textarea的值，它会覆盖占位符文本。

我已经在firebug中检查了您的页面，并且该标记中有一个空格，因此占位符无效。但删除该空格并将占位符保留在其中。它肯定会奏效。

Answer 3

你也可以试试这个，为什么那么多代码

<textarea rows="4" cols="50" placeholder="Message here...">
</textarea>

Answer 4

首先，HTML5完全支持input && textarea的{{3}}属性。

其次，对于旧版本，有一个非常简单的placeholder可以在HTML5和其他HTML之间进行管理。换句话说，如果您的浏览器支持HTML5，它将不会执行任何操作。只需在HTML标记中使用占位符属性，然后让插件完成工作。

第三，如果你有任何问题需要考虑，请尝试使用or开关，例如var val = $(this).val() || $(this).text()。请注意，如果你想要的是另一方面，这可能导致不正确的结果，但第一次评估为真。

最后，如果您不想要该插件，我仍然建议使用placeholder属性和以下JavaScript：

HTML

<textarea id="a" placeholder="text are text?"></textarea>

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')); });

jQuery Plugin Here

注意的
我不认为$(this).val() || $(this).text()可能在某些旧版本的IE中有效，因此您可能需要实际区分，从而编写更长的if语句。我只想在这里找到最简短的答案。如果您需要与OLDER浏览器更多的跨浏览器兼容性，我真的建议已经为您完成所有这些工作的See Working Example Here。

Answer 5

使用这个：

<textarea placeholder="Message"></textarea>

并且记住不要在textarea标签之间放置任何东西（甚至是空格）。 这很简单：）

Answer 6

对于IE 11用户

在IE11中，我的textarea将占位符文本呈现为innerhtml，这是解决问题的一种方法

// IE 11 Hack
handleTextAreaClick(event) {
  if (event.currentTarget.innerHTML === event.currentTarget.placeholder) {
    event.currentTarget.innerHTML = ''
  }
}

不是最优雅的解决方案，但它适用于我的情况。问题是IE将占位符文本视为innerHTML - 更多信息在这里

https://connect.microsoft.com/IE/feedback/details/811408

占位符不在textarea工作

6 个答案:

HTML

JS