提问者:小点点

文本区域限制输入按下


抱歉,我是JavaScript新手,目前我遇到了用户复制包含大量新行空间的文章时的问题。如何修剪它并使其仅为1行新行?以及如何限制用户按输入键(换行符)?

例如,当从其他来源复制一些文本并粘贴到文本区域时,它将显示如下:

This is 
                    //new line 
                   //new line  
                   //new line 
                  //new line 
                  //new line     
Orange
                  //new line 
                  //new line   
                  //new line  
Not apple

如何使它像,复制到文本区域后/从文本区域输入

This is 

orange

not apple

FIDDLEDEMO=FIDDLE

my fiddle output :
------------------ 
This is 
Orange
not apple

Expected output : 
-----------------
This is 

Orange

not apple

任何帮助将不胜感激。谢谢!


共2个答案

匿名用户

如果我对您的理解正确,您可以通过添加侦听器按Enter键来防止用户插入换行符。类似于这样:

var textarea = document.getElementById("myTextArea");
textarea.addEventListener("keydown", function (e) {
    if (e.keyCode == 13) { // keyCode 13 corresponds to the Enter key
        e.preventDefault(); // prevents inserting linebreak
    }
});

JSFiddle在这里

至于替换字符串中的多行新行,正如注释中@adeneo所指出的,你可以使用JavaScript的string. place()函数。你可以在text zone上添加另一个监听器,它监听粘贴事件,如下所示:

textarea.addEventListener("paste", handler);

其中handler是一个您可以定义的函数,它将清理换行符。这是一个小提琴显示:JSFiddle

匿名用户

你期望你的文本有两个\n。检查我的答案,我用jquery和不带jquery显示它。据我所知,您可以通过模糊功能来实现您的要求。

$("#withjquery").blur(function(){ 
 $("#withjquery").val(($("#withjquery").val().replace(/\n\s*\n/g, '\n\n')));
});

function doFormat()
{
  document.getElementById("withoutjquery").value = document.getElementById("withoutjquery").value.replace(/\n\s*\n/g, '\n\n');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<textarea id="withjquery" name="withjquery" rows="5" cols="40"  ></textarea>

<textarea id="withoutjquery" name="withoutjquery" rows="5" cols="40" onblur="doFormat()" ></textarea>