Question

我有固定的textarea和width的{{1}}，我不想调整height的大小，也不想在文本大于它的高度已添加。我希望它限制添加更多文本。

注意：textarea属性无法解决我的问题，因为maxLength和fontSize可以是任何东西，所以我不知道fontFamily的值，只有{{1 }}和maxLength中width的像素

Answer 1

尝试一下：

$("#test1").on("keypress", function(event) {    
    if(($(this).prop("scrollHeight")) > $(this).innerHeight()){
      
      return false;
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test1" rows="2"></textarea>

Answer 2

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <textarea rows="3" onkeyup="myFunction(this)">
a
</textarea>

  <script>
    function myFunction(textarea) {
      if (textarea.scrollHeight > textarea.clientHeight) {
        console.log('visible')
      } else {
        console.log('not visible');
      }
    }
  </script>

</body>

</html>

Answer 3

感谢给我提示。我一直在寻找React中的解决方案，但Jquery中的解决方案也有所帮助。所以，我正在写我自己的问题的解决方案

enter code here

onPaste(ev) {
  ev.stopPropagation();
  ev.preventDefault();
  const elem = this.textarea;
  const clipboardData = ev.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData('Text');
  let index = elem.selectionStart;
  for (let i=0; i<pastedData.length; i++) {
    const strChar = pastedData.charAt(i);
    elem.value = elem.value.slice(0, index) + strChar + elem.value.slice(index);
    if (this.textarea && elem.clientHeight < elem.scrollHeight) {
      elem.value = elem.value.slice(0, index) + elem.value.slice(index + 1);
      break;
    }
    index = index + 1;
  }
}

handleTextareaChange(ev) {
  const elem = this.textarea;
  if (elem.clientHeight < elem.scrollHeight) {
    elem.value = elem.value.slice(0, elem.selectionStart - 1) + elem.value.slice(elem.selectionStart);
   }
}



React JSX

<textarea
    title={this.props.tooltip}
    onChange={this.handleTextareaChange}
    onPaste={this.onPaste}
    ref={textarea => {
       this.textarea = textarea;
    }}
    style={{overflowY: "hidden"}}
  />

限制文本区域以添加超出其高度的文本

3 个答案: