Js 回车换行处理的办法

最新推荐文章于 2021-04-13 14:13:19 发布
最新推荐文章于 2021-04-13 14:13:19 发布
阅读量2.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wgzhl2008/article/details/8536809
本文介绍了一种使用JavaScript实现文本框输入换行效果的方法，通过定义一个自定义的replace函数，将文本中的换行符替换为HTML换行标签，从而在网页上显示换行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


当我们在文本框里输入文字敲下回车后，希望在提交后网页也显示是换行的效果，这时我们需要把提交的内容做下处理

才可以达到效果。

1、定义js原生的替换函数。js里没有replaceAll的函数，需要我们自定义


String.prototype.replaceAll  = function(s1,s2){   
return this.replace(new RegExp(s1,"gm"),s2);   
}

2、使用js的replace进行处理 

str=str.replaceAll("\n", "<br/>")

这样就可以做到js回车换行的效果了！


【vue2】回车发送，Ctrl+回车换行，shift+回车换行禁用
Qxn530的博客
08-08 667
回车发送，Ctrl+回车换行，shift+回车换行禁用
js使用键盘回车键（Enter）操作
qq_32062701的博客
04-21 4747
js使用键盘回车键（Enter）操作 <script type="text/javascript"> window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event; if (evt.keyCode) { if(evt....
Js 回车换行处理的办法及replace方法应用
12-08
当我们在文本框里输入文字敲下回车后，希望在提交后网页也显示是换行的效果，这时我们需要把提交的内容做下处理 才可以达到效果。 1、定义js原生的替换函数。js里没有replaceAll的函数，需要我们自定义 代码如下: String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,”gm”),s2); } 2、使用js的replace进行处理 代码如下: str=str.replaceAll(“\n”, “<br>”) 这样就可以做到js回车换行的效果了！
js实现回车键换下一行
gdali的专栏
08-18 5564
function focusNextInput(thisInput) { var inputs = document.getElementsByTagName("input"); for(var i = 0;i<inputs.length;i++){ // 如果是最后一个，则焦点回到第一个
js 去除空格回车换行
weixin_34354173的博客
07-23 248
开发中遇到特殊需求，需要将空格回车换行替换成逗号 直接使用正则表达式解决： 变量.replace(/\s+/g,","); 如果想要去除则将后面逗号变成空就OK了。 转载于:https://www.cnblogs.com/greatdynasty/p/9353680.html...
js实现textarea回车换行
是我的温柔啊
08-09 4038
<div class="formControls col-sm-6"> <textarea rows="6" cols="130" onkeydown="enter('cOthersResponsible')" id="cOthersResponsible" maxlength="160" style="font-size:1em" placeholder="请输入企业负责人姓名及履历，字数不超过160字"></textarea> <!-- <spa.
Javascript用回车实现换行功能
weixin_34232744的博客
03-28 241
&lt;html&gt; &lt;head&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=big5"&gt; &lt;/head&gt;  &lt;body&gt;
奇怪的回车换行问题
10-28
回车换行（Carriage Return, Line Feed，简称CRLF）是计算机文本处理中用于表示新行的字符组合。在不同的操作系统中，回车换行的表示方式有所不同： 1. **Windows系统**：Windows使用`\r\n`（0x0D, 0x0A）作为一行...
把textarea中字符串里含有的回车换行替换成&lt;br&gt;的javascript代码
10-30
textarea元素允许用户输入多行文本，用户输入的内容中常包含回车换行。有时为了满足特定的展示需求，需要在前端将这些换行符替换为HTML的换行标签` `。 在HTML中，回车符`\r`表示回车（Carriage Return, CR），...
js如何识别出字符串中的回车 \n并输出换行
dxj124的博客
07-10 1万+
1.使用replace全局替换 str=str.replace(/\n/g,"<br/>") 2.正则表达式 var reg = new RegExp("\r\n", "g");//g,表示全部替换 lst[count].Action = lst[count].Action.replace(reg, "<br/>");\\这样Action内容在网页上会自动换...
return后面如果跟着换行，则js引擎会在换行处填补分号，return后面的内容将被忽略！
韦奕-web前端开发
09-29 2549
今天在做项目时出了一个诡异的bug， a()中调用了b()，b()返回一个对象,但在a()中却死活得不到,打印的总是undefined. 于是在a()的return之前打印这个对象,发现该对象是有值的, debug了很多次,结果都一样; 在b()返回之前还是对象,返回到a()中就成了undefined, 百思不得其解. 最后让同事帮忙调试, 最后发现问题的原因居然是b()的return 和
JavaScript中换行输出
Feb_ruary的博客
11-18 2万+
在JavaScript中进行换行输出的方法 方法一：使用“\n”进行换行。 注意： “\n”使用在document.write()中，只起到空格的作用。 方法二：使用“\r”进行换行。 注意： “\r”的用法跟“\n”一样，在document.write()中，只起到空格的作用。 方法三：使用<br/>进行换行。 注意： 使用<br/>进行换行，只适用于document.write()。 ...
js中，替换所有的回车换行符
z69183787的专栏
12-23 6836
Javascript代码   //替换所有的回车换行   function TransferString(content)   {       var string = content;       try{           string=string.replace(/\r\n/g,"")           string=string.replace(/\n/g,
【JavaScript】想在JS中使用换行符，我该怎么操作呢？
热门推荐
tanpenggood
04-22 5万+
使用' \n '换行，而不是'\n' 注意前后空格 实战demo： $('#text').val('hello' + ' \n ' + 'world');
return换行也有错？javascript中return的设计缺陷
aty
03-04 6474
javascript中return的设计缺陷
js 处理换行符 回车 空格
掐指一算乀缺钱
09-18 1751
// 换行符 回车 空格 function reg(str) { if (str) { str = str.replace(/[\n\r]/g, '<br>').replace(/[\n]/g, '<br>').replace(/[\s]/g, '&nbsp;'); } else { str = ""; } return str; }
java中以及js中回车换行替换操作
舞动de人生
07-13 5395
java中替换回车换行为 String content=new String( contentStr.getBytes("8859_1"),"UTF-8"); String newContent=content.replaceAll("(\r\n|\r|\n|\n\r)", ""); js中替换为回车换行 var content=''; var newConte
return后面换行的话会导致函数输出结果外undefined
m0_52724742的博客
04-13 684
如果在 return 后面加上换行，那么js的解释器会默认认为return 已经结束了不会读取后面的返回值数据; function fn1(a, b) { if (a > b) { return a; } else { return b; } } var res = fn1(1, 2); console.log(res); 上面的函数运行结果为undefined return 的正确运行结果就是 返回retu.
shift回车换行 js
最新发布
02-26
### 实现 Shift 键和 Enter 键组合用于换行的功能 为了实现在输入框中按下 `Shift` 和 `Enter` 组合键来触发换行效果，在 JavaScript 中可以通过监听键盘事件并判断按键状态来进行操作[^1]。 当检测到这两个键被同时按下的时候，向文本区域插入一个新行字符 `\n` 或者 `<br>` 标签取决于目标元素是多行文本域还是富文本编辑器。下面是一个简单的例子展示如何做到这一点： 对于普通的 textarea 元素来说，可以直接插入换行符 `\n` 来创建新的行： ```html <textarea id="myTextarea"></textarea> <script> document.getElementById('myTextarea').addEventListener('keydown', function(event){ if (event.key === 'Enter' && event.shiftKey) { // 插入 \n 表示换行 const start = this.selectionStart; const end = this.selectionEnd; // 保存当前光标位置前后的文本 let val = this.value; this.value = val.slice(0, start) + "\n" + val.slice(end); // 将光标移动到下一行开头 this.setSelectionRange(start + 1, start + 1); // 阻止默认行为（提交表单或其他） event.preventDefault(); } }); </script> ``` 如果是在 contenteditable 的 div 上，则应该考虑使用 HTML 断行标签 `<br/>`: ```html <div id="editor" contenteditable="true">Type here...</div> <script> document.getElementById('editor').addEventListener('keydown', function(event){ if (event.key === 'Enter' && event.shiftKey) { document.execCommand('insertHTML', false, '<br>'); event.preventDefault(); } }); </script> ``` 上述代码片段展示了两种不同类型的可编辑区域内通过捕获键盘事件的方式实现了 `Shift+Enter` 换行的效果。第一个适用于标准的 `<textarea>` 控件；第二个则针对具有 `contentEditable=true` 属性的 DOM 节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值