textarea 中如何阻止默认的回车换行事件？

最新推荐文章于 2024-01-30 10:46:21 发布
最新推荐文章于 2024-01-30 10:46:21 发布
阅读量3.5k 收藏
点赞数 1
文章标签： javascript java ViewUI
原文链接：https://segmentfault.com/a/1190000010208756
版权

回车发送消息

IM 在线聊天工具中，我们经常会使用回车（Enter）发送，或者使用组合键（Ctrl+Enter）发送消息。如果是前者使用回车（Enter）发送消息，大家都知道回车又会换行显示，这个如何阻止回车换行事件呢？

event.preventDefault();

阻止默认事件不过如此，但是我却遇见了一个这样的问题，是按下回车时阻止还是松开回车时阻止呢？

按下回车键与松开回车键

https://jsfiddle.net/unoffici...

weixin_34163741
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea中屏蔽回车默认换行
Yiright的博客
01-11 1万+
我司网页版聊天里，用到多行文本框textarea，但是并没有清除默认回车事件，然后找了下解决方案，核心代码如下 "test">   "text/javascript">     var test= document.getElementById("test");    test.onkeydown = function(e){       send(e);    }  
textarea去掉回车换行
jueshengtianya的专栏
09-10 9130
1，把textarea内输入的内容中有回车换行的转成传给后台，         var content = $("#text").val().replace(/\n/g,"");      2，把请求下来的数据在显示到textarea中的时候把的在统一转为换行显示        var news = $(data)[0].result.post[nowid],      var co
textarea中禁止换行
Dull'Note
09-30 1万+
html <textarea onkeydown="checkEnter(event)"></textarea>
el-textarea 禁止输入换行
爱意迷了眼丶的博客
06-06 1158
el-input/>
textarea文本域禁止回车换行
qq_43420577的博客
08-26 3361
input、textarea禁止输入空格，并绑定回车事件
最新发布
前端学习笔记
01-30 1268
举例（其它组件库原理相同），在组件库中，上面的方法无效，需要采用其它方法。回车会换行，所以需要处理一下，回车目的是提交，可以将内容清空。与上面一样，使用 @keydown.enter 即可绑定。如果觉得一个一个禁止太麻烦，也可以全局统一禁止。方法没有用，不要用那个方式。
textarea按下回车发送消息，textarea按下回车不换行
Sam star的博客
04-30 2343
textarea按下回车发送消息，textarea按下回车不换行 textarea按下回车光标返回到初始位置 textarea绑定回车按钮 <div class="input-area"> <textarea name="text" id="textarea" type="text"></textarea> <div class="button-area"> <button id="send-btn
＜textarea＞设置不自动换行
学习使我快乐_玉祥
12-20 1776
加入 wrap="off" 属性，如： <textarea wrap="off"></textarea>
vue textarea阻止回车换行默认行为
weixin_45474673的博客
03-31 3409
textarea 回车换行，导致无法使用回车发送消息 <textarea @keydown="handlePushKeyword($event)" ref="messageInner" style="resize:none" v-model="input_inner" rows="4"></textarea> 回车事件阻止换行 handlePushKeyword(event){ if (event.keyCode === 13) {
阻止多行文本框textarea的enter键换行行为
qq_39192395的博客
05-31 842
<el-input type="textarea" v-model="articleContent" @keydown.enter.native="textareaKeydown" placeholder="请输入要展示给客户的文字内容，左侧可预览效果" maxlength="50" show-word-limit> </el-input> // 阻止多行文本框换行 textareaKeydown() { let e = w...
HTML Textarea 处理不允许换行输入
敲代码的Lee
04-19 1万+
问题：项目维护过程中，测试提出一个bug，就是textarea不能键入回车换行。经过一天的排查，才发现代码里有onkeydown="if(event.keyCode==13)return false;"才导致的不能换行，注释掉即可。 就这个问题，竟然困扰了一天，记录下来，警醒一下自己要仔细。 &lt;%@ page language="java" contentType="text/html;...
vue拦截 “ textarea ” 默认的enter（换行）事件
奔跑的面条博客
06-03 4410
进行对话界面开发的时候， 经常遇到的需求就是点击enter发送数据，所以需要更改textarea的默认事件 注意keydown <textarea name="user_input" ref="user_input" class="user_input" v-model.trim="user_input" cols rows @keydown="messageSendlisten" ></textarea> // todo按下快捷.
[转]屏蔽TextArea中默认的按回车换行
AS3
01-04 1505
[url]http://we.zuisg.com/flex/%E5%B1%8F%E8%94%BDtextarea%E4%B8%AD%E9%BB%98%E8%AE%A4%E7%9A%84%E6%8C%89%E5%9B%9E%E8%BD%A6%E6%8D%A2%E8%A1%8C/[/url] 在Flash开发中，当我们使用TextArea组件时，在输入文本时按下回车键默认会进行换行。如果不想让它...
textarea实现enter发送，ctrl+enter换行，并禁止在textarea回车换行
孙三苗的专栏
11-13 4709
textarea实现enter发送，ctrl+enter换行，并禁止在textarea回车换行。 HTML代码 <div style="width: 60%;"> <textarea style="width: 100%;resize: none;" id="send_chat_msg_box" rows="3" placeholder="请输入消息"> </textarea> </div> JavaScript代码： //1、提交 发送 .
vue使用enter键阻止自动提交表单的解决方法
weixin_42762988的博客
12-11 7093
问题： 项目中使用了element-ui，在某一个input上绑定了enter的键盘事件，代码如下 &lt;el-form :inline="true"&gt; &lt;el-form-item&gt; &lt;el-input placeholder="请输入您要搜索内容的关键词" v-model="value" @keyup.native.enter="s.
antd输入框禁止回车
马优晨
04-01 3754
问题： 比如这里，我输入一个淘宝账号名：结果按回车，就触发了 冒泡。 处理办法： const preventBubble = function (e) { e.preventDefault(); }; <Item label="淘宝账号名"> {getFieldDecorator('taobaoNick', { rules: [ { required: true, message: '请输入淘宝账号名'
textarea实现ctrl+enter换行以及enter发送,禁止在textarea回车换行
qq_16177883的博客
08-07 2472
在textarea中回车触发发送，并且禁止在textarea回车换行 function suball(event){ //兼容Chrome和Firefox event=(event)?event:((window.event)?window.event:""); var keyCode=event.keyCode?event.keyCode:(event.which?ev...
js禁止enter回车事件方法
热门推荐
天下大师傅
09-15 1万+
js版 document.onkeydown = function(e) { var ev = (typeof event!= 'undefined') ? window.event : e; if(ev.keyCode == 13) { return false; } } jQuery版 $(window).keydown( function(e) { var key =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值