Question

是否有可能在HTML中使用单行的textarea永远不会包装到第二行？我喜欢表现得非常像输入。

我试过了：

<textarea class="compact" rows="1" wrap="soft"> </textarea>

.compact{
    resize: none;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
}

为什么我实际上没有使用input？主要是因为IE 10的兼容性和要求在控件中复制粘贴文本。如果粘贴的文字包含\r\n，则IE 10会在\r\n之后修剪任何其他字符，并将结果粘贴到input。

例如，文字

将被粘贴为1，而不会显示其余文字。

Answer 1

您似乎可以使用wrap="soft"，可能还有max-length

<textarea rows="1" wrap="soft" maxlength="20" ></textarea>

Answer 2

我想我明白了。我连接了一个jQuery监听器使用此功能，即使将多行字符串粘贴到其中，也不允许自动换行。空间仍然保留。

$(document).ready(function () {
    $('#formatTextArea').on("keyup", function () {
        var string1 = $('#formatTextArea').val()
        string1 = string1.replace(/(\r\n|\n|\r)/gm, "");
        $('#formatTextArea').val(string1)
    });
});

<textarea class="compact" id="formatTextArea" rows="1" cols="30" wrap="off"></textarea>

Answer 3

你可以使用一点点javascript：

var textarea = $("#your_textarea");

textarea[0].onpaste = function() {
    window.setTimeout(function() {
        var output = textarea.val().replace(/\r?\n|\r/g, ' ') ;        
        textarea.val(output )
    }, 1);
}

请参阅this demo

Answer 4

您可以在div上使用contenteditable属性。它在旧浏览器http://caniuse.com/#search=contenteditable

中得到广泛支持

我在这里创造了一个小小提琴： http://jsfiddle.net/wr14yLh5/

HTML

<div contenteditable></div>

的CSS

div{
    background: green;
    color: #fff;
}

div br{
    display: none;
}

JS

$("div").keypress(function(e){ return e.which != 13; });

Textarea最多一行

4 个答案: