uni-app nvue下textarea 做聊天偶然在没有换行符的情况下会触发发送信息

uni-app nvue下textarea 做聊天偶然在没有换行符的情况下会触发发送信息

开发环境 版本号 项目创建方式
Windows w10 HBuilderX

示例代码：

<textarea id='textarea' class="textarea" :class="{'nobg':!tipsShow.fenpei}" maxlength="199"  :placeholder="tipsShow.fenpei?localeLang('请输入聊天内容...'):localeLang('正在分配客服中...')" cursor-spacing="30"  
ref='focuess' :auto-blur="false" :confirm-hold="true" :focus="chatFocus"  :disabled="!tipsShow.fenpei"  
show-confirm-bar='false' :value="chatValue" @input="chatWrite($event)"
@focus="chatFocusChange($event);popupLayerOpen=false" @blur="chatBlurChange()"
@confirm="clickBarSend()" confirm-type="send"
@keyboardheightchange="chatKeyboardHeightChange($event)" auto-height />&lt;br&gt;

watch: {
    chatValue(txt) {
        if (/\n$/.test(txt)) { //敲了回车键了
            this.clickBarSend()
            this.chatValue = ''
        }
    }
},
//发送信息
clickBarSend(){
},
chatFocusChange: function(e) {
    let that = this
    if (that.popupLayerOpen == true) {
        that.popupLayerOpen = false
        that.heizj = 1
        that.scrollHeight=that.scrollHeight   uni.upx2px(190)
        that.$forceUpdate()
    }
    that.chatFocus=true
    // #ifdef APP-PLUS
    this.keyboardHeight = e.detail.height;
    if(this.emojiOpen ){
        this.topHeight=e.detail.height-150
    }else{
        this.topHeight=e.detail.height
    }
    // #endif
    setTimeout(function() {
        const el = that.$refs.listBottom
        dom.scrollToElement(el, {})
    }, 0)
},
//失去焦点
chatBlurChange: function(e) {
    let that = this
    if (that.heizj) {
        setTimeout(function() {
            that.scrollToBottom();
        }, 0);
    }
    this.heizj = ''
    that.chatFocus=false
    this.keyboardHeight = 0;
    this.topHeight=0
    setTimeout(function() {
        const el = that.$refs.listBottom
        dom.scrollToElement(el, {})
    }, 100)
},
//编辑消息
chatWrite: function(e) {
    this.chatValue = e.detail.value;
    let that=this,bhgd=0
    var query = uni.createSelectorQuery().in(this);    
    query.select('#textarea').boundingClientRect();    
    query.exec(data => {    
        bhgd=data[0].height-that.srkgd  
        if(that.srkgd!=0){  
            that.scrollHeight=that.scrollHeight - bhgd  
            setTimeout(function() {  
                that.scrollToBottom();  
            }, 0);  
        }  
        that.srkgd=data[0].height  
    });  
}

操作步骤：

  • 在输入文字的时候 偶然会发送出去信息

预期结果：

  • 点击发送在发送

实际结果：

  • 偶然会自动发送

bug描述：

  • nvue下textarea 做聊天偶然在没有换行符的情况下会触发发送信息

更多关于uni-app nvue下textarea 做聊天偶然在没有换行符的情况下会触发发送信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue文件无法上传 改为txt上传代码

更多关于uni-app nvue下textarea 做聊天偶然在没有换行符的情况下会触发发送信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题出在watch监听chatValue的逻辑上。在nvue中，textarea组件的输入事件可能在某些情况下（如快速输入、键盘操作等）触发值更新，导致watch中的正则/\n$/误判为有换行符。

解决方案：

  1. 移除watch中的发送逻辑，改为在@confirm事件中统一处理发送
  2. 修改textarea的确认按钮行为：
<textarea
  ...
  @confirm="handleSend"
  confirm-type="send"
  :confirm-hold="true"
/>

methods: {
  handleSend() {
    if (this.chatValue.trim()) {
      this.clickBarSend()
      this.chatValue = ''
    }
  }
}
回到顶部