Question

我希望有一个文本框，最多包含3行可见文本，每行最多包含一个字符，具体取决于textarea的宽度。

这就是我的尝试：

<textarea class="form-control" cols="33" wrap="hard" maxlength="100" style="resize:none;"></textarea>

这允许我有三行，并且由于包裹硬，它将文本分成下一行没有问题。除非您添加Enter，否则你可以有超过3条可见线。

有没有办法防止这种情况并且知道文本在下一行中的位置？

我尝试避免使用maxlength属性：

textboxElement.addEventListener('keypress keyup', function (event) {
        var text, lines, currentLine, currentText, hasSelectedAllText,
        textComponent, selectedText, sel, startPos,endPos;

        text = textboxElement.textboxElement.val();
        lines = text.split("\n");
        currentLine = this.value.substr(0, this.selectionStart).split("\n").length;
        currentText = textboxElement.getValues();
        textComponent = textboxElement;

        if (document.selection != undefined) {
            textboxElement.focus();
            sel = document.selection.createRange();
            selectedText = sel.text;
            if (selectedText) {
              hasSelectedAllText = true;
            }
        } else if (textComponent.selectionStart != undefined) {
            startPos = textComponent.selectionStart;
            endPos = textComponent.selectionEnd;
            selectedText = textComponent.value.substring(startPos, endPos)
            if (selectedText) {
              hasSelectedAllText = true;
            }
        }


        if (lines.length >= $(this).attr('rows') && lines[currentLine - 1].length >= $(this).attr('cols')) {
          if (/[a-zA-Z0-9-_ ]/.test(String.fromCharCode(event.charCode)) && !hasSelectedAllText) { 
            var text = textboxElement.getValues();
             textboxElement.setValues(text.substring(0, text.length - 2));
          }
        } else if (lines[currentLine - 1].length >= $(this).attr('cols')) {
          textboxElement.val(text + "\n");
        }

      });

这样做的问题是，这会添加\n，并且很难删除内容，因为有时它会被窃听。您无法修改已编写的单词。它打破了单词而不是将它们推到下一行。所以基本上我的手动实现我打破了textarea。

我想要的是避免用户看到要输入的3行以上的可见行。

Answer 1

这应该有效。在codepen上测试，COpied和粘贴长文本，命中输入行是固定的。

textarea {
 width: 300px;
 max-height: 50px;
 overflow:hidden;
}

<textarea class="form-control" wrap="hard" maxlength="100" style="resize:none;"></textarea>

风格= “调整大小：无;” ＆GT;

如何防止具有maxlength的textarea中的新行

1 个答案: