Question

以下是html代码：

 <textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>

<script>
$(function() {
    function supports_input_placeholder() {
        var i = document.createElement('input');
        return 'placeholder' in i;
    }
    if (!supports_input_placeholder()) {
        var fields = document.getElementsByTagName('textarea');
        for (var i = 0; i < fields.length; i++) {
            if (fields[i].hasAttribute('placeholder')) {
                fields[i].defaultValue = fields[i].getAttribute('placeholder');
                fields[i].onfocus = function() {
                    if (this.value == this.defaultValue)
                        this.value = '';
                }
                fields[i].onblur = function() {
                    if (this.value == '')
                        this.value = this.defaultValue;
                }
            }
        }
    }
});
</script>

请帮我指出错误。占位符回退功能无法正常工作。我一直在调试它。

以下是小提琴的链接：检查ie9及以下的功能，因为它们不支持占位符属性：

http://jsfiddle.net/DxcYW/

由于

Answer 1

这是纯JavaScript：

(function (D, undefined) {
  'use strict';
  var i, length, placeholder, textareas;
  function hidePlaceHolder (placeholder) {
    return function (e) {
      var target;
      target = e.target || e.srcElement;
      if (target.value === placeholder) {
        target.value = '';
      }
    };
  }
  function showPlaceHolder (placeholder) {
    return function (e) {
      var target;
      target = e.currentTarget || e.srcElement;
      if (target.value === '') {
        target.value = placeholder;
      }
    };
  }
  if (! ('placeholder' in D.createElement('textarea'))) {
    textareas = D.getElementsByTagName('textarea');
    length = textareas.length;
    for (i = 0; i < length; i += 1) {
      placeholder = textareas[i].getAttribute('placeholder');
      textareas[i].value = placeholder;
      if (textareas[i].addEventListener) {
        textareas[i].addEventListener('focus', hidePlaceHolder(placeholder));  
        textareas[i].addEventListener('blur', showPlaceHolder(placeholder));
      } else {
        textareas[i].attachEvent('onfocus', hidePlaceHolder(placeholder));  
        textareas[i].attachEvent('onblur', showPlaceHolder(placeholder));
      }
    }
  }
}(document));

Answer 2

尝试将您的JS放入

    <script> ... </script>

标记。：）

Answer 3

我的发现和解决方案：

输入字段具有值属性，但 TEXTAREA 没有。
因此，当我们对输入标记使用 inputObj.defaultValue =“sometext”时，如果我们不定义属性，则将默认值和当前值设置为 sometext，输入标签中的value =“something”。这在ie9及以上版本中工作正常。对于以下版本，如果我们没有定义value =“sometext” inputObj.defaultValue =“sometext”将不会将当前值设置为默认值。为此，我们可以做两件事：
1. 我们必须手动给出value =“等于占位符文本的东西”
2. 我们可以通过javascript获取占位符的值，并从那里设置值。
textarea不是这种情况。 Textarea没有属性值。因此，当我们使用 textareaObj.defaultValue =“sometextarea text”时，默认值设置为给定文本而不是值本身，因为我们没有值attribute.value在textarea中只是textarea标签之间的内容。
defaultvalue和value之间的区别：
1. 一旦设置，默认值保持不变。
2. value是javascript或我自己在文本字段中输入的当前值。

对于我的上述问题，我找到了一种解决方法，只需在代码中添加一行：

<textarea name="test" rows="5" cols="20" placeholder="Brief description of your requirement,project, concept or idea"></textarea>

<script>
$(function() {
    function supports_input_placeholder() {
        var i = document.createElement('input');
        return 'placeholder' in i;
    }
    if (!supports_input_placeholder()) {
        var fields = document.getElementsByTagName('textarea');
        for (var i = 0; i < fields.length; i++) {
            if (fields[i].hasAttribute('placeholder')) {
                fields[i].defaultValue = fields[i].getAttribute('placeholder');
                fields[i].value = fields[i].getAttribute('placeholder');//setting the value    
                fields[i].onfocus = function() {
                    if (this.value == this.defaultValue)
                        this.value = '';
                }
                fields[i].onblur = function() {
                    if (this.value == '')
                        this.value = this.defaultValue;
                }
            }
        }
    }
});
</script>

谢谢你们的快速回复，我很同情那个投票的人。我觉得这是个好问题。不是吗？

占位符javascript后备textarea无法正常工作

3 个答案: