0

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

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

占位符显示在输入字段中，但不显示在文本区域中。

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

4

6 回答 6

4

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

正如影子所指出的，您还应该看看 HTML5placeholder属性

于 2013-09-11T08:11:18.930 回答
4

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

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

于 2013-09-11T08:18:12.743 回答
2

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

<textarea rows="4" cols="50" placeholder="Message here...">
</textarea>
于 2013-09-11T08:12:37.450 回答
0

首先，HTML5 完全placeholder支持input && textarea.

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

第三，如果您对使用类似的值有疑问，请尝试使用or开关，例如var val = $(this).val() || $(this).text(). 请注意，如果您想要的东西在 or 的另一边，这可能会导致不正确的结果，但第一个评估为 true。

最后，如果您不想要那个插件，我仍然建议使用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')); });

请参阅此处的工作示例

注意
我认为$(this).val() || $(this).text()可能不适用于某些旧版本的 IE，因此您可能需要实际区分，从而编写更长的 if 语句。我只是想在这里显示最短的答案。如果您需要对旧浏览器的更多跨浏览器兼容性，我真的建议已经为您完成所有这些工作的插件。

于 2013-09-19T13:13:33.697 回答
0

只使用这个：

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

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

于 2015-07-09T22:44:20.527 回答
0

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

于 2017-03-28T20:38:53.307 回答