修改input通过光标焦点是否在input内控制是否更新数据,回车下发参数让input失去焦点更新数据

wuyouming666

2023-12-26 a5a49ece3191bf8210c42b522503687cedb420c2

 CanadaMes-ui/src/views/Electrical/AutomaticParameterSetting.vue

@@ -64,7 +64,7 @@
            v-model="item.value"
            class="input-box"
            :oninput="`value=value.replace(/^0|[^0-9]/g,'');if(value<`+item.min+`){value=`+item.value+`}else if(value>`+item.max+`){value=`+item.value+`}`"
            @keyup.enter.native="submitDataToBackend">
            @keyup.enter.native="submitDataToBackend($event)">
  </el-input>

  <!-- <el-input v-if="item.type === '0'"
@@ -114,6 +114,7 @@


  },
 
  methods: {
    closeSocket () {
      // 关闭 WebSocket 连接
@@ -155,7 +156,7 @@
      const jsonString = JSON.stringify(jsonObject);
      console.log('提交以下数据到后端:', jsonString);
      socket?.send(jsonString);

      event.target.blur(); // 取消输入框焦点

    },
    initWebSocket () {
@@ -181,24 +182,31 @@
        };

        // 收到消息
        let isMouseInInputBox = false; // 标记鼠标是否在输入框内
//         let isMouseInInputBox = false; // 标记鼠标是否在输入框内

const inputBox = document.querySelectorAll('.input-box');
inputBox.forEach(box => {
  box.addEventListener('mouseenter', () => {
    isMouseInInputBox = true;
  });
  box.addEventListener('mouseleave', () => {
    isMouseInInputBox = false;
  });
});
// const inputBox = document.querySelectorAll('.input-box');
// inputBox.forEach(box => {
//   box.addEventListener('mouseenter', () => {
//     isMouseInInputBox = true;
//   });
//   box.addEventListener('mouseleave', () => {
//     isMouseInInputBox = false;
//   });
// });

socket.onmessage = (msg) => {
  if (!msg.data) {
    return; // 如果收到空数据，则直接返回，不执行后续逻辑
  }

  // 添加判断条件：如果光标在输入框内，则不执行后续逻辑
  if (document.activeElement.tagName.toLowerCase() === 'input') {
    return;
  }
 

  let obj = JSON.parse(msg.data);
  
  const jsonData2 = this.jsonData;

  const parms = obj.params;
@@ -210,9 +218,7 @@
      const fanzhuan2 = obj.fanzhuan2;
      const xiaoche2 = obj.xiaoche2;

  if(parms && !isMouseInInputBox){
     

  if(parms){
      let index = 0;
      for (let i = 0; i < jsonData2.length - 1; i++) {
        let arr = jsonData2[i];
@@ -227,6 +233,7 @@
          }
        }
      }

      if (Array.isArray(fanzhuan) && Array.isArray(fanzhuan[0]) && fanzhuan[0][0] !== undefined) {
        jsonData2[4][0]['value'] = fanzhuan[0][0];
      }
@@ -252,6 +259,10 @@
        }
      }

    // // 添加判断条件：如果光标在输入框内，则不执行后续逻辑
    // if (document.activeElement.tagName.toLowerCase() === 'input') {
    //   return;
    // }
     
              for (let i = 0; i < jsonData2.length; i++) {
                let arr = jsonData2[i];
@@ -275,15 +286,13 @@
        jsonData2[9][0]['value'] = xiaoche2[0][0];
      }
    }
  


};






        // 关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");