Question

我有这个代码正在运行。但它仅适用于一个textarea，因为它使用ID。但是我想在我的代码中使用这个用于所有textareas。我尝试了getElementsByClassName，但它没有用。

HTML：

<textarea id="textarea1" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment..."></textarea>

JS：

<script type="text/javascript">
  var textarea = document.getElementById("textarea1");
  var limit = 200;

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";

  if(textarea.style.height == "92px"){
    textarea.style.overflow = "hidden";
  } else if(textarea.style.height < limit  + "px"){
    textarea.style.overflow = "hidden";
  } else {
    textarea.style.overflow = "auto";
  }
};
</script>

我该怎么做？

Answer 1

如果您查看docs，您会看到getElementsByClassName返回HTMLCollection。您必须循环遍历所有子元素才能使其正常工作。

var textareas = document.getElementsByClassName("form-control page-textarea");
var limit = 200;

for(var i=0, length= textareas.length; i < length; i++){
   var textarea = textareas[i];
   textarea.oninput = function() {
    this.style.height = "";
    this.style.height = Math.min(this.scrollHeight, limit) + "px";

    if(this.style.height == "92px"){
      this.style.overflow = "hidden";
    } else if(this.style.height < limit  + "px"){
      this.style.overflow = "hidden";
    } else {
      this.style.overflow = "auto";
    }
  };
}

FIDDLE

Answer 2

在这种情况下，我的事件授权是更好的方法。检查此代码。

document.addEventListener('input', function(event) {
    var limit = 200;
    if(event.target.getAttribute("class") == "form-control page-textarea") {
      var target = event.target;
      target.style.height = "";
     target.style.height = Math.min(target.scrollHeight, limit) + "px";

     if(target.style.height == "92px"){
       target.style.overflow = "hidden";
     } else if(target.style.height < limit  + "px"){
       target.style.overflow = "hidden";
     } else {
       target.style.overflow = "auto";
     }   
    }
}, false);

这是jsFiddle的工作。 http://jsfiddle.net/yg6sS/5/ 通过这种方式，我们可以节省循环因素。

Answer 3

 use jquery to easily solve this 
    $(function() {
            $("textarea").css("border", "3px solid red");

                              (OR)
            $("textarea").css('border':'3px solid red','color':'Green');
    });

getElementById到getElementsByClassName

3 个答案: