@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -1,33 +1,8 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-20 10:35:56
- * @LastEditTime: 2023-02-01 13:47:26
- * @Description: file content
--->
 <script>
-import { EdgeDirection } from "../../JsViewEngineWidget";
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import CursorVue from "./Cursor.vue";
-
-const InputType = {
-  TEXT: Forge.TextInputType.TEXT,
-  NUMBER: Forge.TextInputType.NUMBER,
-  PASSWORD: Forge.TextInputType.PASSWORD,
-};
-const ifDigital = (char) =>
-  "0".charCodeAt() <= char.charCodeAt() &&
-  char.charCodeAt() <= "9".charCodeAt();
-const ifDirectionKeyCode = (code) => code >= 37 && code <= 40;
-const edgeMap = {
-  37: EdgeDirection.left,
-  38: EdgeDirection.top,
-  39: EdgeDirection.right,
-  40: EdgeDirection.bottom,
-};
-const MAX_WIDTH = 1920;
-/*
+/**
+ * @file
  * JsvInput：文字的输入控件
- *      props说明:
+ *      @props 说明:
  *         left {number}                组件的x
  *         top {number}                 组件的y
  *         width {number}               组件的宽
@@ -35,7 +10,8 @@ const MAX_WIDTH = 1920;
  *         type Input.type.TEXT         若为number类型，则输入时，非number无法输入
  *         placeholder {string}         文字颜色值为灰色,默认值为"请输入文字"
  *         placeholderColor {string}    默认文字颜色,默认值为灰色
- *         maxLength {number}           最大字符长度, 默认100，支持单行最大宽度为1920*2， 
+ *         editorBackground {string}    当ime出现时，输入框呈现的强调颜色,注意:不能为半透明色
+ *         maxLength {number}           最大字符长度, 默认100，支持单行最大宽度为1920*2，
  *                                      fontsize为30，则字数大约为1920*2/30 = 100个左右
  *         readonly {bool}              属性规定输入字段是只读的, 默认false
  *         value {string}               输入的字符串
@@ -49,11 +25,15 @@ const MAX_WIDTH = 1920;
  *         onEdge {function}        方向键到达边缘回调
  *              @oarams edge_info   边缘信息
  *                                  {
- *                                    direction: EdgeDirection, 
+ *                                    direction: EdgeDirection,
  *                                    rect: {x: value,y: value, widht: value,height: value}
  *                                  }
  *         onTextChange {function}  文字改动回调
  *              @params string 当前文字
+ *         onBackKey {function}     收到返回键时的决策，根据返回值决定是吞掉还是放过，
+ *                                  返回true时可以规避ime显示后有时会吐出返回键导致整体退出的问题
+ *              @params isUp {boolean} 是down(false)还是up(true)
+ *              @return {boolean}
  *
  *  InputDispatcher dispatch支持事件:
  *          add
@@ -62,698 +42,331 @@ const MAX_WIDTH = 1920;
  * public methods:
  *        add
  *          @description 添加文字
-            @params {String} string 添加文字
+ *          @params {String} string 添加文字
  *        delete
-            @description 删除文字
+ *           @description 删除文字
  *        clear
-            @description 清空文字
+ *          @description 清空文字
  */
-
+import { InputType } from "./SharedDefine";
 export { InputType };
-export default {
-  components: {
-    CursorVue,
+</script>
+
+<script setup>
+import { EdgeDirection } from "../../JsViewEngineWidget";
+import CursorVue from "./Cursor.vue";
+import { watchEffect, computed, onMounted, onUnmounted, shallowRef } from "vue";
+import { EditViewOperator } from "./EditViewOperator";
+
+const rProps = defineProps({
+  name: {
+    type: String,
   },
-  props: {
-    name: {
-      type: String,
-    },
-    left: {
-      type: Number,
-      default: 0,
-    },
-    top: {
-      type: Number,
-      default: 0,
-    },
-    width: {
-      type: Number,
-      default: 100,
-    },
-    height: {
-      type: Number,
-      default: 20,
-    },
-    type: {
-      type: Number,
-      default: InputType.TEXT,
-    },
-    placeholder: {
-      type: String,
-      default: "请输入",
-    },
-    placeholderColor: {
-      type: String,
-      default: "#CDCCD6",
-    },
-    maxLength: {
-      type: Number,
-      default: 100,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    fontStyle: {
-      type: [Object, Array],
-      default() {
-        return {
-          textAlign: "left",
-          fontSize: 12,
-          color: "#000000",
-        };
-      },
-    },
-    cursorShow: {
-      type: Boolean,
-      default: true,
-    },
-    cursorWidth: {
-      type: Number,
-      default: 2,
-    },
-    cursorColor: {
-      type: String,
-      default: "",
-    },
-    onTextOverflow: {
-      type: Function,
-    },
-    onTextChange: {
-      type: Function,
-    },
-    onEdge: {
-      type: Function,
-    },
+  left: {
+    type: Number,
+    default: 0,
   },
-  data() {
-    return {
-      fullString: this.value,
-      curOffset: this.value.length,
-      textWidth: 0,
-      textLeft: 0,
-    };
+  top: {
+    type: Number,
+    default: 0,
   },
-  setup() {
-    return {
-      editControlView: null,
-      editControlViewId: -1,
-      isFocus: false,
-      visibleAreaCurStart: 0,
-      visibleAreaCurPos: 0,
-      visibleAreaCurEnd: 0,
-      cursorPauseTimeoutToken: -1,
-    };
+  width: {
+    type: Number,
+    default: 100,
   },
-  computed: {
-    realText() {
-      return this.type === InputType.PASSWORD
-        ? this.fullString.replace(/\w/g, "*")
-        : this.fullString;
-    },
-    placeholderVisible() {
-      return this.fullString.length === 0 && this.placeholder.length > 0;
-    },
-    cursorLeft() {
-      return (
-        this._calculateCursorPosition(this.realText, this.curOffset) +
-        this.textLeft
-      );
-    },
-    cursorColorInner() {
-      return this.cursorColor ? this.cursorColor : this.fontStyle.color;
-    },
+  height: {
+    type: Number,
+    default: 20,
   },
-  methods: {
-    _updateTextWidth(text) {
-      if (text.length !== this.fullString.length) {
-        if (text.length === 0) {
-          this.textWidth = this.width;
-        } else {
-          this.textWidth = this._calculateCursorPosition(text, text.length);
-          if (this.textWidth < this.width) {
-            this.textWidth = this.width;
-          }
-        }
-      }
-    },
-
-    _onTextChanged(text, cursor_pos, moved) {
-      if (moved) {
-        // 移动时，光标不闪烁
-        this.pauseCursorBlink();
-      } else {
-        if (text.length >= this.maxLength) {
-          text = this.fullString;
-          if (this.editControlView && this.isFocus) {
-            this.editControlView.updateCursorOffset(
-              this.fullString,
-              this.curOffset
-            );
-          }
-          return;
-        }
-      }
-      if (text.length > 0) {
-        const start = cursor_pos - 1;
-        const end = cursor_pos;
-        const add_text = text.slice(start, end);
-        if (
-          add_text &&
-          !ifDigital(add_text) &&
-          this.type === InputType.NUMBER
-        ) {
-          // console.log(
-          //   `onTextChanged add text failed, add_text:${add_text}, when input type is number!`
-          // );
-          if (this.editControlView) {
-            this.editControlView.updateCursorOffset(
-              this.fullString,
-              this.curOffset
-            );
-          }
-          return;
-        }
-      }
-
-      this._updateTextWidth(text);
-      this.textLeft = this._calculateSlide(
-        this.fullString,
-        text,
-        cursor_pos,
-        moved
-      );
-      this.fullString = text;
-      this.curOffset = cursor_pos;
-      this.onTextChange?.(text);
-    },
-
-    // 1:shown 0:hidden
-    _onStatusChanged(status) {
-      // console.log("OnStatusChanged status", status);
-    },
-
-    _getStringWithFont(str) {
-      const size = this.fontStyle.fontSize ? this.fontStyle.fontSize : 12;
-      const font = this.fontStyle.fontFamily;
-      const alignment = this.fontStyle.textAlign;
-      const italic = this.fontStyle.fontStyle === "italic";
-      const bold = this.fontStyle.fontWeight === "bold";
-      return Forge.sTextUtils.StringWithFont(
-        str,
-        size,
-        font,
-        alignment,
-        "middle",
-        null,
-        italic,
-        bold
-      );
-    },
-    _getFullStringLength(str) {
-      return Forge.sTextUtils.GetTextWidth(this._getStringWithFont(str));
-    },
-
-    add(string) {
-      if (this.type === InputType.NUMBER && !ifDigital(string)) {
-        // console.log(`The input data:${string} is not number`);
-        return;
-      }
-      const pre_full_str = this.fullString;
-      const pre_index = this.curOffset;
-      if (this.fullString.length < this.maxLength) {
-        const new_str =
-          pre_full_str.slice(0, pre_index) +
-          string +
-          pre_full_str.slice(pre_index);
-        const new_index = pre_index + string.length;
-        this._onTextChanged(new_str, new_index);
-      } else {
-        if (this.onTextOverflow) {
-          this.onTextOverflow();
-        }
-      }
-    },
-
-    delete() {
-      const pre_full_str = this.fullString;
-      const pre_index = this.curOffset;
-      if (pre_index > 0) {
-        const new_str =
-          pre_full_str.slice(0, pre_index - 1) + pre_full_str.slice(pre_index);
-        const new_index = pre_index - 1;
-        this._onTextChanged(new_str, new_index);
-      }
-    },
-
-    clear() {
-      this._onTextChanged("", 0);
-    },
-
-    replace(string) {
-      this._onTextChanged(string, string.length);
-    },
-
-    _calculateCursorPosition(full_str, cursor_offset) {
-      const target_str = this._GetRealText(full_str);
-      const font_params = this._getStringWithFont(target_str);
-      const max_width = MAX_WIDTH; // 最大宽度为1920*2， 根据texture的最大宽度设定
-      const max_rect = new Forge.RectArea(0, 0, max_width, this.height);
-      const text_attr = Forge.sTextUtils.TextAttr("none", "none");
-      const cur_pos = Forge.sTextUtils.GetCursorPosition(
-        target_str,
-        max_rect,
-        font_params,
-        text_attr,
-        this.height,
-        cursor_offset
-      );
-      return cur_pos.x;
-    },
-
-    _getLeftWithDelChar(current_cursor_position, target_str) {
-      let new_left = this.textLeft;
-      let offset = 0;
-      if (current_cursor_position === 0) {
-        offset = -new_left;
-        new_left = 0;
-      } else if (
-        current_cursor_position - this.cursorWidth > 0 &&
-        current_cursor_position - this.cursorWidth <= this.visibleAreaCurStart
-      ) {
-        offset = this.visibleAreaCurPos - current_cursor_position;
-        if (new_left < 0 && new_left + offset + this.textWidth < this.width) {
-          // 删除字符时，可视区域内字符串显示不全，对left做调整
-          offset = this.width - (new_left + this.textWidth);
-        }
-        new_left += offset;
-        if (new_left > 0) {
-          new_left = 0;
-        } else {
-          if (this.fontStyle.textAlign === "right") {
-            const text_real_width = this._getFullStringLength(target_str);
-            if (new_left > text_real_width - MAX_WIDTH) {
-              new_left = text_real_width - MAX_WIDTH;
-              offset = this.visibleAreaCurStart + new_left;
-            }
-          }
-        }
-      } else {
-        if (new_left < 0 && new_left + this.textWidth < this.width) {
-          // 删除字符时，可视区域内字符串显示不全，对left做调整
-          offset = this.width - (new_left + this.textWidth);
-          new_left = this.width - this.textWidth;
-        } else {
-          if (this.fontStyle.textAlign === "right") {
-            const text_real_width = this._getFullStringLength(target_str);
-            if (text_real_width >= this.width) {
-              if (new_left > text_real_width - MAX_WIDTH) {
-                new_left = text_real_width - MAX_WIDTH;
-                offset = this.visibleAreaCurStart + new_left;
-              }
-            } else {
-              new_left = this.width - MAX_WIDTH;
-              offset = this.visibleAreaCurStart + new_left;
-            }
-          }
-        }
-      }
-
-      this._updateVisibleAreaCursor(-offset);
-      // console.log(` _getLeftWithDelChar2 target_str:${target_str}, new_left:${new_left}, this.textWidth:${this.textWidth}`);
-
-      return new_left;
-    },
-
-    _getLeftWithMoveRight() {
-      let new_left = this.textLeft;
-      let offset = this.width / 2;
-      // 边界检测
-      if (this.textWidth + (new_left - offset) < this.width) {
-        new_left = this.width - this.textWidth;
-        offset = -new_left - this.visibleAreaCurStart;
-      } else {
-        new_left -= offset;
-      }
-
-      this._updateVisibleAreaCursor(offset);
-      return new_left;
-    },
-
-    _getLeftWithMoveLeft() {
-      let new_left = this.textLeft;
-      let offset = this.width / 2;
-      new_left += offset;
-      // 边界检测
-      if (new_left > 0) {
-        new_left = 0;
-        offset = this.visibleAreaCurStart;
-      } else {
-        if (this.fontStyle.textAlign === "right") {
-          const text_real_width = this._getFullStringLength(
-            this._GetShowText()
-          );
-          if (new_left > text_real_width - MAX_WIDTH) {
-            new_left = text_real_width - MAX_WIDTH;
-            offset = this.visibleAreaCurStart + new_left;
-          }
-        }
-      }
-      this._updateVisibleAreaCursor(-offset);
-      return new_left;
-    },
-
-    _updateVisibleAreaCursor(offset) {
-      this.visibleAreaCurStart += offset;
-      if (this.visibleAreaCurStart < 0) {
-        this.visibleAreaCurStart = 0;
-      }
-      this.visibleAreaCurEnd = this.visibleAreaCurStart + this.width;
-    },
-
-    _getLeftWithAddChar(current_cursor_position, end_add) {
-      let new_left = this.textLeft;
-      if (
-        current_cursor_position + this.cursorWidth >=
-        this.visibleAreaCurEnd
-      ) {
-        let offset = current_cursor_position - this.visibleAreaCurPos;
-        new_left -= offset;
-        if (end_add) {
-          // 尾部追加，对齐坐标
-          if (this.fontStyle.textAlign === "right") {
-            new_left = this.width - MAX_WIDTH;
-            offset = -this.visibleAreaCurStart - new_left;
-          } else {
-            new_left = this.width - this.textWidth;
-            offset = -this.visibleAreaCurStart - new_left;
-          }
-        }
-
-        this._updateVisibleAreaCursor(offset);
-      }
-
-      return new_left;
-    },
-
-    _calculateSlide(pre_str, target_str, cur_index, moved) {
-      if (target_str.length === 0) {
-        if (this.fontStyle.textAlign === "right") {
-          const offset = MAX_WIDTH - this.width - this.visibleAreaCurStart;
-          this._updateVisibleAreaCursor(offset);
-          this.visibleAreaCurPos = this.visibleAreaCurEnd;
-          return this.width - MAX_WIDTH;
-        }
-        const offset = -this.visibleAreaCurStart;
-        this._updateVisibleAreaCursor(offset);
-        this.visibleAreaCurPos = this.visibleAreaCurEnd;
-        return 0;
-      }
-
-      let new_left = this.textLeft;
-      const current_cursor_position = this._calculateCursorPosition(
-        target_str,
-        cur_index
-      );
-      let option_mode = "op_vis_normal"; // 可视区域内移动
-      // 计算模式
-      if (pre_str.length > target_str.length) {
-        option_mode = "op_del"; // 字符删除
-      } else if (pre_str.length < target_str.length) {
-        option_mode = "op_add"; // 字符追加
-      } else {
-        if (moved) {
-          if (current_cursor_position <= this.visibleAreaCurStart) {
-            option_mode = "op_move_left"; // 边界左移动
-          } else if (current_cursor_position >= this.visibleAreaCurEnd) {
-            option_mode = "op_move_right"; // 边界右移动
-          }
-        }
-      }
-
-      // 根据用户动作，区分计算方法
-      switch (option_mode) {
-        case "op_del":
-          new_left = this._getLeftWithDelChar(
-            current_cursor_position,
-            target_str
-          );
-          break;
-        case "op_add":
-          new_left = this._getLeftWithAddChar(
-            current_cursor_position,
-            target_str.length === cur_index
-          );
-          break;
-        case "op_move_left":
-          new_left = this._getLeftWithMoveLeft(current_cursor_position);
-          break;
-        case "op_move_right":
-          new_left = this._getLeftWithMoveRight(current_cursor_position);
-          break;
-        case "op_vis_normal":
-        default:
-          break;
-      }
-
-      // 更新可视区域光标位置
-      this.visibleAreaCurPos = current_cursor_position;
-      return new_left;
-    },
-
-    onFocus() {
-      // console.log("Input Focus");
-      this.isFocus = true;
-      this.$refs.cursor?.startBlink();
-      if (this.editControlView && !this.readonly) {
-        this.editControlView.showIme(
-          this.type,
-          this.fullString,
-          this.curOffset
-        );
-      }
-    },
-
-    onBlur() {
-      this.isFocus = false;
-      // console.log("Input Blur");
-      if (this.editControlView && !this.readonly) {
-        this.editControlView.hideIme();
-      }
-    },
-
-    clearCursorPauseTimer() {
-      if (this.cursorPauseTimeoutToken) {
-        clearTimeout(this.cursorPauseTimeoutToken);
-        this.cursorPauseTimeoutToken = -1;
-      }
-    },
-    pauseCursorBlink() {
-      if (this.$refs.cursor) {
-        this.$refs.cursor?.stopBlink(true);
-      }
-      this.clearCursorPauseTimer();
-      this.cursorPauseTimeoutToken = setTimeout(() => {
-        this.$refs.cursor?.startBlink();
-      }, 500);
-    },
-    onKeyDown(keyEvent) {
-      let key_used = false;
-      let pre_index = this.curOffset;
-      let cur_index;
-      let valid_move = false;
-
-      switch (keyEvent.keyCode) {
-        case 37: // left
-          this.pauseCursorBlink();
-          if (pre_index !== 0) {
-            valid_move = true;
-            cur_index = --pre_index;
-            key_used = true;
-          }
-          break;
-        case 39: // right
-          this.pauseCursorBlink();
-          if (pre_index < this.fullString.length) {
-            valid_move = true;
-            cur_index = ++pre_index;
-            key_used = true;
-          }
-          break;
-        case 38: // up
-        case 40: // down
-          break;
-        case 13:
-          // 显示键盘
-          this.editControlView.showIme(
-            this.type,
-            this.fullString,
-            this.curOffset
-          );
-          key_used = true;
-          break;
-        case 27:
-        case 10000:
-          //返回键吐出
-          key_used = false;
-          break;
-        default:
-          // 浏览器中，点击浏览器时input焦点丢失，JsvInput收到任意按键获取焦点
-          if (!window.JsView) {
-            // 显示键盘
-            this.editControlView.showIme(
-              this.type,
-              this.fullString,
-              this.curOffset
-            );
-            key_used = true;
-          }
-          break;
-      }
-
-      if (ifDirectionKeyCode(keyEvent.keyCode)) {
-        if (valid_move) {
-          this.curOffset = cur_index;
-          this.textLeft = this._calculateSlide(
-            this.fullString,
-            this.fullString,
-            cur_index,
-            true
-          );
-          if (this.editControlView) {
-            this.editControlView.updateCursorOffset(this.fullString, cur_index);
-          }
-        } else {
-          if (this.onEdge && edgeMap[keyEvent.keyCode]) {
-            this.onEdge({
-              direction: edgeMap[keyEvent.keyCode],
-              rect: {
-                x: this.left,
-                y: this.top,
-                width: this.width,
-                height: this.height,
-              },
-            });
-            // if (!on_edged && !window.JsView) {
-            //   // 重获焦点
-            //   this.editControlView.showIme(
-            //     this.type,
-            //     this.fullString,
-            //     this.curOffset
-            //   );
-            // }
-          }
-        }
-      }
-      return key_used;
-    },
-    _GetRealText(src_str) {
-      let value = src_str;
-      if (this.type === Forge.TextInputType.PASSWORD) {
-        // password
-        value = value.replace(/\w/g, "*");
-      }
-
-      return value;
-    },
-    _GetShowText() {
-      return this._GetRealText(this.fullString);
+  type: {
+    type: Number,
+    default: InputType.TEXT,
+  },
+  placeholder: {
+    type: String,
+    default: "请输入",
+  },
+  placeholderColor: {
+    type: String,
+    default: "#CDCCD6",
+  },
+  editorBackground: {
+    type: String,
+    default: "#5d5c76",
+  },
+  maxLength: {
+    type: Number,
+    default: 100,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  fontStyle: {
+    type: [Object, Array],
+    default() {
+      return {
+        textAlign: "left",
+        fontSize: 12,
+        color: "#000000",
+      };
     },
   },
-  created() {
-    this.editControlView = new Forge.EditControlView();
-    this.editControlView.OnTextChanged = this._onTextChanged;
-    this.editControlView.OnStatusChanged = this._onStatusChanged;
-
-    this.editControlViewId = Forge.sViewStore.add(
-      new Forge.ViewInfo(this.editControlView)
-    );
-    const cur_position = this._calculateCursorPosition(
-      this.value,
-      this.value.length
-    );
-    this.visibleAreaCurEnd =
-      cur_position > this.width ? cur_position : this.width; // 可视区域光标结束位置，当光标位置超出这个范围，则更新start&end,并更新text left
-    this.visibleAreaCurStart = this.visibleAreaCurEnd - this.width; // 可视区域光标起始位置
-    this.visibleAreaCurPos = cur_position;
-
-    // 文字的描画长度，默认为可视区域的长度
-    // 文字内容变化时，文字显示宽度变化，最小为可视区域的长度
-    this.textWidth = cur_position > this.width ? cur_position : this.width;
-    this.textLeft = this._calculateSlide("", this.value, this.value.length);
+  cursorShow: {
+    type: Boolean,
+    default: true,
   },
-  mounted() {
-    this.$refs.cursor?.startBlink();
+  cursorWidth: {
+    type: Number,
+    default: 2,
   },
-  beforeUnmount() {
-    if (this.editControlViewId != -1) {
-      Forge.sViewStore.remove(this.editControlViewId);
-      this.editControlViewId = -1;
-    }
-    this.clearCursorPauseTimer();
+  cursorColor: {
+    type: String,
+    default: "",
+  },
+  onTextOverflow: {
+    type: Function,
   },
+  onTextChange: {
+    type: Function,
+  },
+  onEdge: {
+    type: Function,
+  },
+  onBackKey: {
+    Type: Function,
+  },
+});
+
+let rCursorRef = shallowRef(null);
+let rInputFinalText = shallowRef("");
+let rInputFinalTextLenth = shallowRef(0);
+let rTextPosLeft = shallowRef(0);
+let rCursorLeft = shallowRef(0);
+
+function _OnTextChanged(input_final_text, dsp_text) {
+  console.log(
+    "_OnTextChanged input_final_text=" +
+      input_final_text +
+      " dsp_text=" +
+      dsp_text
+  );
+  rInputFinalText.value = dsp_text;
+  rInputFinalTextLenth.value = dsp_text.length;
+}
+
+function _OnCursorPositionChanged(text_left, cursor_left) {
+  rTextPosLeft.value = text_left;
+  rCursorLeft.value = cursor_left + text_left;
+}
+
+// 创建Forge的EditView控制处理
+let cEditViewOperator = new EditViewOperator(
+  _OnTextChanged,
+  _OnCursorPositionChanged,
+  rProps.onTextOverflow
+);
+let vEditViewInnerId = cEditViewOperator.generateView(); // 建立Forge.EditView
+
+cEditViewOperator.updateInputConfig(
+  rProps.width,
+  rProps.height,
+  rProps.cursorWidth,
+  rProps.fontStyle,
+  rProps.type,
+  rProps.maxLength,
+  rProps.readonly,
+  rProps.fontStyle.color,
+  rProps.editorBackground
+);
+
+function _FocusBlockOnFocus() {
+  cEditViewOperator.updateFocus(true);
+}
+
+function _FocusBlockOnBlur() {
+  cEditViewOperator.updateFocus(false);
+}
+
+// 按键处理
+const fncIfDirectionKeyCode = (code) => code >= 37 && code <= 40;
+const cEdgeMap = {
+  37: EdgeDirection.left,
+  38: EdgeDirection.top,
+  39: EdgeDirection.right,
+  40: EdgeDirection.bottom,
 };
+function _FocusBlockOnKeyDown(keyEvent) {
+  let key_used = false;
+  let valid_move = false;
+
+  switch (keyEvent.keyCode) {
+    case 37: // left
+      valid_move = cEditViewOperator.moveCursorOffset(-1);
+      key_used = true;
+      break;
+    case 39: // right
+      valid_move = cEditViewOperator.moveCursorOffset(1);
+      key_used = true;
+      break;
+    case 38: // up
+    case 40: // down
+      break;
+    case 13:
+      // 显示键盘
+      cEditViewOperator.showSoftIme();
+      key_used = true;
+      break;
+    case 27:
+    case 10000:
+      //返回键吐出
+      key_used = !!rProps.onBackKey?.(false);
+      break;
+    default:
+      // 浏览器中，点击浏览器时input焦点丢失，JsvInput收到任意按键获取焦点
+      if (!window.JsView) {
+        // 显示键盘
+        cEditViewOperator.showSoftIme();
+        key_used = true;
+      }
+      break;
+  }
+
+  if (fncIfDirectionKeyCode(keyEvent.keyCode) && !valid_move) {
+    // 跳出当前输入框
+    if (rProps.onEdge && cEdgeMap[keyEvent.keyCode]) {
+      rProps.onEdge({
+        direction: cEdgeMap[keyEvent.keyCode],
+        rect: {
+          x: rProps.left,
+          y: rProps.top,
+          width: rProps.width,
+          height: rProps.height,
+        },
+      });
+    }
+  }
+  return key_used;
+}
+
+function _FocusBlockOnKeyUp(ev) {
+  if (ev.keyCode == 10000) {
+    return !!rProps.onBackKey?.(true);
+  }
+
+  return false;
+}
+
+const rPlaceholderVisible = computed(() => {
+  return rInputFinalTextLenth.length === 0 && rProps.placeholder.length > 0;
+});
+
+const rCursorColorInner = computed(() => {
+  return rProps.cursorColor ? rProps.cursorColor : rProps.fontStyle.color;
+});
+
+// rProps.text改动跟进
+watchEffect(() => {
+  cEditViewOperator.replaceText(rProps.text);
+});
+
+onMounted(() => {
+  cEditViewOperator.setCursorRef(rCursorRef.value);
+});
+
+onUnmounted(() => {
+  cEditViewOperator.onUnmounted();
+  vEditViewInnerId = -1;
+  cEditViewOperator.setCursorRef(null);
+  cEditViewOperator = null;
+});
+
+defineExpose({
+  add: (text) => {
+    cEditViewOperator?.addText(text);
+  },
+  delete: () => {
+    cEditViewOperator?.deleteText();
+  },
+  clear: () => {
+    cEditViewOperator?.clearText();
+  },
+  replace: (text) => {
+    cEditViewOperator?.replaceText(text);
+  },
+});
 </script>
 
 <template>
   <jsv-focus-block
-    :name="name"
+    :name="rProps.name"
     :onAction="{
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown
+      onFocus: _FocusBlockOnFocus,
+      onBlur: _FocusBlockOnBlur,
+      onKeyDown: _FocusBlockOnKeyDown,
+      onKeyUp: _FocusBlockOnKeyUp,
     }"
     :style="{
-      left: left,
-      top: top,
-      width: width,
-      height: height,
+      left: rProps.left,
+      top: rProps.top,
+      width: rProps.width,
+      height: rProps.height,
     }"
   >
     <div
       :style="{
-        width: width,
-        height: height,
+        width: rProps.width,
+        height: rProps.height,
         overflow: 'hidden',
       }"
     >
       <div
         :style="{
-          left: this.textLeft,
-          width: this.textWidth,
-          height: height,
-          lineHeight: height,
-          ...this.fontStyle,
+          left: rTextPosLeft,
+          height: rProps.height,
+          lineHeight: rProps.height,
+          ...rProps.fontStyle,
         }"
       >
-        {{ realText }}
+        {{ rInputFinalText }}
       </div>
       <div
-        v-if="placeholderVisible"
+        v-if="rPlaceholderVisible"
         :style="{
           left: 0,
-          width: width,
-          height: height,
-          lineHeight: height,
-          ...fontStyle,
-          color: placeholderColor,
+          width: rProps.width,
+          height: rProps.height,
+          lineHeight: rProps.height,
+          ...rProps.fontStyle,
+          color: rProps.placeholderColor,
         }"
       >
-        {{ placeholder }}
+        {{ rProps.placeholder }}
       </div>
     </div>
     <cursor-vue
-      v-if="cursorShow"
-      ref="cursor"
-      :left="cursorLeft"
-      :height="height"
-      :color="cursorColorInner"
-      :width="cursorWidth"
+      v-if="rProps.cursorShow"
+      ref="rCursorRef"
+      :left="rCursorLeft"
+      :height="rProps.height"
+      :color="rCursorColorInner"
+      :width="rProps.cursorWidth"
+    />
+    <div
+      :style="{
+        width: rProps.width,
+        height: rProps.height,
+      }"
+      :data-jsv-vw-innerview="vEditViewInnerId"
     />
-    <div :data-jsv-vw-innerview="editControlViewId" />
   </jsv-focus-block>
-</template>
+</template>
+<style scoped>
+.testColor {
+  background-color: #5d5c76;
+}
+</style>