[vue3] opt 优化多行输入时光标定位 tzfun#110

Author: tzfun

src/Terminal.vue

@@ -952,7 +952,6 @@ const _printHelp = (regExp: RegExp, srcStr: string) => {
 }
 
 const _inputEnter = (e: KeyboardEvent) => {
-  e.preventDefault()
   if (e.ctrlKey) {
     if (command.value.length > 0) {
       let cursorIdx = cursorConf.idx
@@ -967,18 +966,6 @@ const _inputEnter = (e: KeyboardEvent) => {
       })
     }
   } else {
-    //  因无法阻止回车输入，这里手动删掉前后一个回车
-    let cursorIdx = terminalCmdInputRef.value.selectionStart
-    let enterIdx = -1
-    if (command.value[cursorIdx] == '\n') {
-      enterIdx = cursorIdx
-    } else if (command.value[cursorIdx - 1] == '\n') {
-      enterIdx = cursorIdx - 1
-    }
-
-    if (enterIdx >= 0) {
-      command.value = command.value.substring(0, enterIdx) + command.value.substring(enterIdx + 1)
-    }
     _execute()
   }
 }
@@ -1290,7 +1277,6 @@ const _calculateCursorPos = (cmdStr?: string) => {
   _calculateByteLen()
 
   if (idx < 0 || idx >= cmd.length) {
-    console.debug(`reset cursor, idx: ${idx}, cmd.length: ${cmd.length}`)
     _resetCursorPos()
     return
   }
@@ -1485,11 +1471,17 @@ const _onInputKeydown = (e: KeyboardEvent) => {
   } else if (key === 'arrowright') {
     _checkInputCursor()
     _cursorGoRight()
+  } else if (key === 'enter') {
+    e.preventDefault()
   }
 }
 
 const _onInputKeyup = (e: KeyboardEvent) => {
   let key = e.key.toLowerCase()
+  if (key === 'enter') {
+    e.preventDefault()
+    return
+  }
   let code = e.code.toLowerCase()
   if (key === 'home' || key === 'end' || code === 'altleft' || code === 'metaleft' || code === 'controlleft'
       || ((e.ctrlKey || e.metaKey || e.altKey) && (key === 'arrowright' || key === 'arrowleft'))) {

test/App.vue

@@ -60,7 +60,8 @@ const terminals = ref<Array<any>>([
   }
 ])
 
-const onExecCmd = (key: string, command: Command, success: SuccessFunc, failed: FailedFunc, name: string) => {
+const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc, name: string) => {
+  console.log(`Executed command is '${command}'`)
   if (key === 'list') {
     success("hello")
     TerminalApi.pushMessage(name, {
@@ -311,13 +312,25 @@ const onClick = (key: string, name: string) => {
   }
 }
 
+const textAreaKeyDown = (e: KeyboardEvent) => {
+  console.log(e)
+  if (e.key === 'Enter') {
+    e.preventDefault()
+  }
+}
+
+const textAreaKeyEnter = () => {
+  console.log("input enter")
+}
 </script>
 <template>
   <div id="app">
 
     <button @click="getCommand">get command</button>
     <button @click="setCommand">set command</button>
-    <textarea v-model="testInputValue"/>
+    <textarea v-model="testInputValue"
+              @keydown="textAreaKeyDown"
+              @keyup.enter="textAreaKeyEnter"/>
 
     <!--    <div style="width: 700px;height: 400px;margin-left: 150px;margin-top: 300px">-->
     <!--      <terminal-->