VUE+element Input框 实现输入内容可自适应文本高度,换行(空格换行,enter发送)阻止文本域的回车事件

文章讲述了如何在ElementUI的el-input组件中,通过设置type为textarea实现输入内容自适应高度,并利用@keydown.enter.native.prevent阻止enter键换行,改为按空格键进行换行。同时,详细说明了inputChange方法处理空格换行和inputAdd方法处理enter触发的逻辑。
摘要由CSDN通过智能技术生成

需求

输入框实现输入内容自适应高度 以及可以换行

使用官方文档提供的属性
在这里插入图片描述

代码

<el-input clearable autosize type="textarea" 
          :placeholder="$t('navbar.pleaseInput')"
          v-model="inputText" 
          @change="inputChange" 
          @keyup.enter.native='inputAdd' 
/>

这样的话 会导致enter 换行 也会触发 enter事件里的方法,就没办法再另一行重新输入了
因为input 类型设置为 textarea,按enter 键就会默认触发换行

所以 需求 要实现的是

input框根据输入内容 自适应高度并且换行。 按空格键实现换行enter键 不要换行,只触发对应的事件

这里将 @keyup.enter.native 改为 @keydown.enter.native.prevent 阻止文本域的回车事件,

既 可实现 空格:换行,enter:不会换行,触发方法里对应的事件

<el-input clearable autosize type="textarea" 
          :placeholder="$t('navbar.pleaseInput')"
          v-model="inputText" 
          @input="inputChange" 
          @keydown.enter.native.prevent='inputAdd' 
/>
       inputChange() {
          //将输入内容中的空格替换为换行符,实现 按空格键换行的效果
            this.inputText = this.inputText.replace(/ /g, '\n');
        },
        
        // 输入框enter事件
        inputAdd() { },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值