最多一行的文本区域答案

【问题标题】：Textarea with maximum one row最多一行的文本区域
【发布时间】：2015-02-18 18:38:27
【问题描述】：

是否可以在 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，没有其余文本。

【问题讨论】：

我想表现得更像一个输入。，是什么阻止你使用输入？您为什么要使用并非按照您想要的方式使用的东西？
你可能是没有 javascript 的 SOL... FWIW，我不明白为什么文本输入不起作用——复制/粘贴工作正常。在您的示例中，输入将显示 1 2 3 没有任何中断，即使在复制回来之后...
听起来它正是你想要的。听起来您要求一个控件来修剪\r\n 之后的所有内容。

标签： html

【解决方案1】：

我想我明白了。我连接了一个 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>

【讨论】：

我认为可能有一种不使用 JS 的方法。这看起来不错。除了一件事，这将捕获所有按键，甚至是意外按键，例如尝试使用 Ctrl+A 选择所有文本
是的。但是，如果您在自己的项目中尝试这样做，它会完美运行。您可以左右箭头、Ctrl+箭头、Ctrl+A 等，并且不会注意到减速或怪异。我认为既然它是一个监听器，它就可以查看所有的键位。
只是一个小小的修改，看起来就好了。我已将事件从 keyup 更改为 input，它不再捕获快捷键或命令。

【解决方案2】：

看来您可以使用wrap="soft" 也可能使用max-length

&lt;textarea rows="1" wrap="soft" maxlength="20" &gt;&lt;/textarea&gt;

【讨论】：

这很好，但不知何故，我试图建立一个行为就像输入一样的控件（仅一行）。多行必须以某种方式不可用...
我尝试过使用 input 代替 JS hacks 从剪贴板操作文本，但我不想走那条路...
我想我没听懂...打字时按回车键，所有换行符都可以在 IE 中复制出来...我相信 OP 不想要换行符
@Ted，如果您尝试在输入（类型=文本）中复制粘贴带有换行符的文本，在 Chrome 中，浏览器实际上会粘贴文本并通过转换它们来忽略换行符变成一个空格字符。我想要实现的是完全相同的事情，但在 IE 10 上也是如此。不幸的是，使用输入是不可能的，我已经尝试用 textarea 以某种方式实现这一点，但没有成功
啊……我现在明白了。你想换行，比如 \r\n，用空格 \s 替换？

【解决方案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

【讨论】：

我不明白为什么按回车会将字符替换为''
哦，这个 javascript 没有做任何事情来敲击回车。它只处理糊状物。您描述的是基于 CSS (wite-space:nowrap) 的 IE 浏览器行为。删除 js 并重新运行它 - 你会看到它的行为相同
是的，但是...在 IE 上它不会将文本换行到第二行。在 Chrome 上它确实......我真的不明白
这将需要更多的 js 来处理关键事件——请参阅挂钩到 keyup 事件的其他答案。不同的浏览器做不同的事情——通常，IE 的工作方式和所有其他浏览器的工作方式相同。 IE 总是“特别”的。

【解决方案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;
}

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

【讨论】：