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` 组件支持换行功能并能在不同场景下正常显示换行符,可以采用多种方式来处理。 #### 方法一:通过正则表达式替换换行符 对于需要保留原始输入中的换行符并在特定情况下转换为 HTML 标签的情况,可以通过 JavaScript 的字符串操作函数配合正则表达式完成。具体做法是在获取到用户输入的内容之后,利用 `.replace()` 函数将 `\n` 或者其他形式的换行字符替换为 `<br/>` 标签[^1]: ```javascript textFormat(val) { if (val) { let newString = val.replace(/\n/g, '<br/>'); return newString; } } ``` 这种方法适用于当数据从服务器端返回或者保存至数据库之前做预处理,确保即使在网络传输过程丢失了实际的换行列,也能正确解析成可视化的换行效果。 #### 方法二:统一换行符标准 考虑到某些设备或浏览器可能不会自动识别所有的换行组合(如 `\r\n`, `\n\r`, `\r`, `\n`),可以在接收用户的输入时先将其标准化为单一类型的换行符再进一步处理[^2]: ```javascript inputs(e) { const replaceRegex = /(\n\r|\r\n|\r|\n)/g; this.chatContent = e.detail.value.replace(replaceRegex, '\n'); } ``` 这一步骤有助于提高跨平台一致性,并简化后续针对换行逻辑的操作流程。 #### 方法三:直接使用 View 和 Text 结合展示 如果目标仅仅是让视图层能够按照原文本格式呈现,则可以直接在页面模板中嵌套一层 `text` 节点作为容器包裹住要显示的文字内容[^4]: ```html <view> <text>{{ chatContent }}</text> </view> ``` 这种方式简单有效,特别适合于那些不需要额外样式定制的需求场合。 #### 方法四:监听键盘事件控制行为 最后一种常见的方式是通过监听键盘按键事件来自定义按下 Enter 键的行为。比如允许 Ctrl+Enter 进行换行而单独按 Enter 则提交表单或其他动作[^5]: ```javascript suball(event){ event = event || window.event; var keyCode = event.keyCode || event.which; if (keyCode === 13 && event.ctrlKey) { // ctrl+enter换行 $('#dope').val($('#dope').val() + "\n"); } else if (keyCode === 13) { // enter 发送消息 send_msg(); event.preventDefault(); // 阻止默认换行行为 } } ``` 以上四种方案可以根据具体的业务需求灵活选用或组合应用,从而达到理想的用户体验效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值