Question

我的网页上有令人满意的输入字段。我需要做些什么才能将多行文本转换为单行文本，例如，如果您将大量文本复制到搜索字段中，就像google一样？

示例 - 我复制了这样的文字：

这是随机文本，lalalalalalala
它的多线，
但那就是我想要的东西。

当我将其粘贴到我的contenteditable输入字段中时，我想得到：

这是随机文字，lalalalalala和它的多线，但这就是我想要的。

- ＆GT;整行文本

Answer 1

您应该使用这样的输入标记：<input type="text"/>。

Answer 2

我就这样做了：

$('#paste').click(function(){
    $(this).html('');
});
$('#paste').focusout(function(){
    $(this).html($(this).text().replace('/n', ''));
});

Have a look at the full JSFiddle code demo

Answer 3

使用文字输入。这是单行文本字段，会自动删除换行符。

<input name="mySingleLineTextField" type="text" />

如果您必须使用textarea，那么您可以轻松地设置其值以使用一点JavaScript删除标签和换行符：

<textarea name="myMultiLineTextFieldWithFormattingRemoved" onchange="this.value=this.value.replace(/([\n\r\t]+)/g, ' ')"></textarea>

例如：http://jsfiddle.net/z2rmxj4j/

因为将脚本内联到这里并不是一个很好的形式，而是一个在所有keyup上有textareas个事件的小例子，这个事件有类＆＃39; nobreaks＆＃39;：

＆＃13;

(function(){
    //select all textareas having the class of 'nobreaks'
    var elems = document.querySelectorAll("textarea.nobreaks");
    //for each element in our collection
    for(i=0; i<elems.length; i++){
        //attach a function to the keyup event
        elems[i].onkeyup = function(){
            this.value=this.value.replace(/([\n\r\t\s]+)/g, ' ');
        }
    }
})()

＆＃13;

pre {color:grey}
input, textarea {display:block; width:300px; margin:10px;}
.nobreaks {}
.nowrap {white-space:nowrap;}

＆＃13;

<pre>This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
</pre>

<input type="text" value="Will replace line-breaks, text cannot wrap." />
<textarea>Default. 
Wont replace line-breaks and text can wrap.</textarea>
<textarea class="nobreaks">Will replace line-breaks but text can still flow/wrap.</textarea>
<textarea class="nobreaks nowrap">Will replace line-breaks and prevent the text from wrapping.</textarea>

＆＃13;

有关输入类型的详细信息，请参阅https://developer.mozilla.org/en/docs/Web/HTML/Element/Input。

Answer 4

在元素上使用以下CSS：

white-space:nowrap;

Answer 5

＆＃13;

var text = "This had line\n breaks\n in it.";

text = text.replace(/(\r\n|\n|\r)/gm,"");

alert(text);

＆＃13;

如何创建单行文本输入字段？

5 个答案: