Browse Source

输入组件光标扩大范围,输入默认宽度修改

zhouna 6 years ago
parent
commit
57c3360b1f
1 changed files with 25 additions and 1 deletions
  1. 25 1
      src/common/components/InlineTag/index.jsx

+ 25 - 1
src/common/components/InlineTag/index.jsx

@@ -28,6 +28,7 @@ class InlineTag extends Component {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleInput = this.handleInput.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleFixClick = this.handleFixClick.bind(this);
   }
   changeToEdit(e){
     const {handledbClick,id} = this.props;
@@ -80,12 +81,34 @@ class InlineTag extends Component {
     }
     return style['selected-tag'];
   }
- 
+  moveEnd(obj) {
+    if(window.getSelection){//ie11 10 9 ff safari
+      obj.focus(); //解决ff不获取焦点无法定位问题
+      var range = window.getSelection();//创建range
+      range.selectAllChildren(obj);//range 选择obj下所有子内容
+      range.collapseToEnd();//光标移至最后
+    }
+    else if (document.selection) {//ie10 9 8 7 6 5
+      var range = document.selection.createRange();//创建选择对象
+      range.moveToElementText(obj);//range定位到obj
+      range.collapse(false);//光标移至最后
+      range.select();
+    }
+  }
+  handleFixClick(){
+    this.moveEnd(this.$span.current);
+  }
+  componentDidMount(){
+    //设置最小宽度避免输入后宽度跳动
+    const spanWidth = window.getComputedStyle(this.$span.current).width;
+    this.$span.current.style.minWidth=spanWidth;
+  }
   render(){
     const {placeholder,value,prefix,suffix} = this.props;
     const inp = this.state.value;
     return <div className={this.getStyle()}
                  onDoubleClick={this.changeToEdit}
+                  onClick={this.handleFixClick}
                  onkeydown={handleEnter}
                  onBlur={this.changeToClick} ref={this.$box} contentEditable={this.state.editable}>
                 {prefix}
@@ -94,6 +117,7 @@ class InlineTag extends Component {
                       onBlur={this.handleBlur}
                       onInput={this.handleInput}
                       onFocus={this.handleFocus}
+                      onClick={e=>e.stopPropagation()}
                       onkeydown={handleEnter}
                       ref={this.$span}>{value||(inp?'':placeholder)}</span>
                 {suffix}