Question

我有一个脚本，可以使文本区域扩展为适合其中的文本。我希望将其应用于我网站上所有的textarea，除了一个。无论如何，有没有一个脚本停止该元素。

正在使用的脚本：

文本区域：

var autoExpand = function (field) {

// Reset field height
field.style.height = 'inherit';

// Get the computed styles for the element
var computed = window.getComputedStyle(field);

  // Calculate the height
  var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
             + parseInt(computed.getPropertyValue('padding-top'), 10)
             + field.scrollHeight
             + parseInt(computed.getPropertyValue('padding-bottom'), 10)
             + parseInt(computed.getPropertyValue('border-bottom-width'), 
  10);

  field.style.height = height + 'px';

  };

  document.addEventListener('input', function (event) {
  if (event.target.tagName.toLowerCase() !== 'textarea') return;
  autoExpand(event.target);
  }, false);

Answer 1

CSS

textarea {
  resize: none;
}

通过ID：

#sendie {
  resize: none;
}

那行不通，将其用于您的功能

  document.addEventListener('input', function (event) {
      if (event.target.tagName.toLowerCase() !== 'textarea') return;
      autoExpand(event.target);
      document.getElementById("sendie").style.resize = "none"
  }, false);

假设“ sendie”是您不想惹的麻烦。

Answer 2

您可以将一个类添加到要应用脚本的文本区域

var autoExpand = function (field) {

// Reset field height
field.style.height = 'inherit';

// Get the computed styles for the element
var computed = window.getComputedStyle(field);

  // Calculate the height
  var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
             + parseInt(computed.getPropertyValue('padding-top'), 10)
             + field.scrollHeight
             + parseInt(computed.getPropertyValue('padding-bottom'), 10)
             + parseInt(computed.getPropertyValue('border-bottom-width'), 
  10);

  field.style.height = height + 'px';

  };
  var textareas = document.querySelectorAll(".apply");
  for(var i=0;i<textareas.length;i++)
  textareas[i].addEventListener('input', function (event) {
  autoExpand(event.target);
  }, false);

.apply{
background:yellow;
}

<textarea class="apply" maxlength = '100' ></textarea>
<textarea class="apply" maxlength = '100' ></textarea>
<textarea maxlength = '100' ></textarea>

如何有选择地将脚本应用于元素？

2 个答案: