Question

我有一个不可调整大小的文本区域。我需要它按如下方式工作：

当用户输入文本时，如果他们输入了76个字符，那么在按下Enter键之前，他们应该不再能够打字

OR

它应该作为新行继续到下一行。

我尝试在提交后对其进行处理，每76个字符添加换行符，但是它添加了太多的空格，并且当我进行修剪时，摆脱了必需的空格。

最快，最人性化的方法是什么？

<textarea class="edit_note_text"></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{
    overflow-y: auto;
    overflow-x: hidden;
    resize: none;
    font-size: 16px;
    font-family: Courier;
    padding: 8px 8px;
    border-color: #dcdcdc;
    color: #4e4e4e;
    margin: 10px 16px 0px;
    width: 780px;
    height: 160px;
        position: relative;
    box-sizing: border-box;
    -webkit-appearance: textarea;
    background-color: white;
    -webkit-rtl-ordering: logical;
    flex-direction: column;
    outline: none;
        cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-width: 1px;
    border-style: solid;
    }

<textarea class="edit_note_text" cols='76'></textarea>

我尝试了几种使用CSS修复此问题的方法，但我不认为CSS是解决之道。我曾想过在keyup上使用Javascript，但是有很多方法可以解决。

Answer 1

结合使用keydown和preventDefault。当用户按下您的文本区域内的键时，获取文本区域的value属性。使用.split("\n")将其分成几行，如果长度大于76，则运行event.preventDefault()：

function keyDown(e) {
    var text = document.getElementById("text");
    var lines = text.value.split("\n");
    var line = text.value.substring(0, text.selectionStart).split("\n").length - 1;
    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))
        e.preventDefault();
}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

Answer 2

您可以尝试

<textarea id="myarea" cols="76" wrap="hard"></textarea>

这将仅允许每行76个字符

在文本区域中每行限制字符数

2 个答案: