Question

您好我需要用户编辑小文本，类似于“推文”，大约100个字符，但与实际推特推文不同，不允许换行符，这是一行。但另一件事是这个编辑字段必须水平缩短，远小于文本长度，大约20-40个字符宽。所以textarea更方便，有两三排。

所以基本上我需要在textarea和输入行之间进行混音。或者换句话说，输入行不是滚动而是包装。将长字符串换成两三行，但不允许任何换行符。怎么做到这一点？

需要这种输入有两个原因，一个是在PC浏览器上固定父元素的宽度，第二个是可以在手机浏览器中使用（320像素宽）。

Answer 1

将CSS属性overflow:hidden和resize:none添加到<textarea>应该可以解决问题。

JS阻止ENTER

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', function (event) {
    if ( event.keyCode == 13 ) {
        event.preventDefault();
    }
})

Answer 2

简短的回答是使用textarea并使用JavaScript过滤输入，使用CSS来修复框尺寸。

这样的事情：

<textarea id="message"></textarea>

JavaScript会监控按下的键，只允许该字符不是换行符，且总长度小于最大值。

window.addEventListener('load',init,false);
function init() {
    var message=document.getElementById('message');
    message.onkeypress=checkMessage;
}
function checkMessage(event) {
    event=event||window.event;
    var key=event.which;
    var max=60;
    return key.code!=13 && this.value.length<max;
}

<input />和<textarea>之间的混合，或包装＆lt; input＆gt; </textarea>

2 个答案: