Question

你好我们有关于我的textarea自定义占位符的问题这是我的代码

场景是我有一个内容div持有textarea和div占位符我想要的是，如果textarea为null并且焦点占位符不可见但是如果textarea不为null并且焦点占位符将不可见并且textarea是焦点..我需要一个纯粹的javascript函数或css样式，它将运行到ie8。

Answer 1

您可以尝试@JamieRead解决方案。但对于旧版浏览器，这是解决方案，PS。这适用于新老浏览器：

将此添加到您的头部：

<script>
    function unsetPlaceholder(textarea){
        if (textarea.value=='placeholdertext'){textarea.value='';};return false;
    }

    function setPlaceholder(textarea){
        if (textarea.value==''){textarea.value='placeholdertext';return false;}
    }
</script>

这是你的主体：

<textarea onfocus="unsetPlaceholder(this)"  onblur="setPlaceholder(this)">placeholdertext</textarea>

是的，用你的占位符替换'placeholdertext'的所有出现..

JSFIDDLE

Answer 2

所有浏览器的jQuery修复：

HTML：

<input type="text" placeholder="Fill me …">

使用Javascript：

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

<强> http://jsfiddle.net/u3gTL/

Answer 3

您可以使用HTML5占位符属性placeholder="text"。

HTML：

 <textarea placeholder="text"></textarea>

JsFiddle

您可以按照@asavchenko的建议使用placeholder.js library。

Answer 4

您可以使用placeholder.js库：https://github.com/NV/placeholder.js/ 适用于IE＆gt; 6

更新：纯HTML属性占位符是HTML5属性，在旧浏览器中不起作用 ...

Answer 5

结合使用建议的HTML5占位符属性，我还建议您使用https://github.com/mathiasbynens/jquery-placeholder作为填充，因为之前建议的https://github.com/NV/placeholder.js/已不再维护。

textarea的自定义占位符

5 个答案: