我有一个固定的textarea和width的height，我不想调整textarea，我也不想添加滚动条，当文本大于它的高度时添加。我希望它限制添加更多文本。
注意：maxLength属性不会解决我的问题，因为fontSize和fontFamily可以是任何东西，所以我不知道maxLength值，只有width和height的textarea像素
<!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>试试这个：
$("#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>谢谢你给我提示。我一直在寻找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"}}
/>