uniapp textarea 输入法发送按钮长按换行并且能发送

一. 效果展示

二. 代码展示

confirm-type 此属性是设置输入法按钮是什么按钮,这个属性设置可以去查看官方文档。

@confirm 是点击发送后触发的方法,用途可以自己书写

@input 是当键盘输入时,触发 input 事件

我输入了哈哈,并且长按了一次发送来触发换行,咱们输出一下双向绑定的值,可以看到

哈哈后面的‘/r’,并不会触发换行,我们将他全局替换成‘/n’,就能长按发送键换行了

inputs(e) {
	let replaceRegex = /(\n\r|\r\n|\r|\n)/g; 
	this.chatContent = e.detail.value.replace(replaceRegex, '\n');
},

### 在 UniApp 中为 Textarea 添加发送按钮 为了在 UniApp 中创建带有发送按钮的 `textarea` 组件,可以采用组合方式来构建自定义输入框。具体来说,通过将 `textarea` 和按钮放置在同一容器内,并利用 CSS 进行样式调整,从而达到理想的布局效果。 #### HTML 结构设计 首先,在页面模板部分定义一个包含 `textarea` 及按钮的视图结构: ```html <view class="input-container"> <textarea v-model="messageContent" placeholder="请输入消息..." auto-height></textarea> <button type="primary" size="mini" @click="sendMessage">发送</button> </view> ``` 此处使用了 Vue 的双向绑定特性 (`v-model`) 来关联数据模型与表单控件之间的值传递[^1]。 #### 样式设置 接着配置相应的样式规则使组件呈现更美观的效果: ```css .input-container { display: flex; align-items: center; } .input-container textarea { width: calc(100% - 80px); /* 预留空间给右侧按钮 */ padding: 10px; border-radius: 5px; margin-right: 10px; } ``` 此段代码设置了弹性盒子布局让子元素水平排列并居中对齐;同时给予文本域适当宽度以便于用户编辑多行文字内容。 #### JavaScript 方法实现 最后编写处理逻辑函数用于响应用户的交互操作: ```javascript export default { data() { return { messageContent: '' }; }, methods: { sendMessage() { const content = this.messageContent.trim(); if (content !== '') { console.log('发送的消息:', content); // 此处可加入实际业务逻辑 如调用接口提交数据等 // 清空当前输入框 this.messageContent = ''; } } } } ``` 上述方法监听点击事件触发时获取到已填写的信息并通过控制台打印出来作为调试用途;清空原有内容等待下一次输入。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值