Explorar o código

血压enter聚焦到下一个最后

zhouna %!s(int64=6) %!d(string=hai) anos
pai
achega
be581587e8
Modificáronse 2 ficheiros con 28 adicións e 18 borrados
  1. 15 1
      src/components/MultSpread/index.jsx
  2. 13 17
      src/components/NumberDrop/index.jsx

+ 15 - 1
src/components/MultSpread/index.jsx

@@ -49,9 +49,23 @@ class MultSpread extends Component{
       numDoms:doms
     });
   }
+  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();
+    }
+  }
   setNextFocus(i){
     const doms = this.state.numDoms;
-    doms[i+1]&&doms[i+1].current.focus();
+    doms[i+1]&&this.moveEnd(doms[i+1].current)
   }
   getLabels(){
     const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;

+ 13 - 17
src/components/NumberDrop/index.jsx

@@ -44,6 +44,7 @@ class NumberDrop extends Component{
     this.beyondArea = this.beyondArea.bind(this);
   }
   select(text){        //选中键盘上数字事件
+    //placeholder修改后,第一次点击键盘触发blur后onClick不触发,原因未知,改为onMouseup可触发
     let timer = null;
     clearTimeout(this.state.sltTimer);
     clearTimeout(this.state.blurTimer);
@@ -166,21 +167,19 @@ class NumberDrop extends Component{
   numInpBlur(e){        //数字框失焦,保存值到store中
     e.stopPropagation();
     const {handleSelect,ikey,suffix,prefix,mainSaveText,min,max,show} = this.props;
-    /*if(show){      //修改清空后第一次点击键盘不触发click事件bug
+    /*if(show){      //修改清空后第一次点击键盘不触发click事件bug--失焦placehoder消失,弃用
       return;
     }*/
     //输入超出合理范围或输入不是数字提示且清空
     const needCompare=min!=undefined&&max!=undefined;
-    //if(needCompare){
-      const txt = e.target.innerText.trim();
-      const isFine = this.validSymbols(txt,min,max);      //有~或/时是否合理
-      const hasSymbol = /[\/|\~]/g.test(txt);           //是否有~或/
-      const singleFine = (!isNaN(+txt)&&!needCompare)||(!isNaN(+txt)&&needCompare&&parseFloat(min)<=parseFloat(txt)&&parseFloat(txt)<=parseFloat(max));   //无~或/时是否合理
-      if(txt!=''&&(!hasSymbol&&!singleFine)||(hasSymbol&&!isFine)){
-        this.beyondArea();
-        return;
-      }
-    //}
+    const txt = e.target.innerText.trim();
+    const isFine = this.validSymbols(txt,min,max);      //有~或/时是否合理
+    const hasSymbol = /[\/|\~]/g.test(txt);           //是否有~或/
+    const singleFine = (!isNaN(+txt)&&!needCompare)||(!isNaN(+txt)&&needCompare&&parseFloat(min)<=parseFloat(txt)&&parseFloat(txt)<=parseFloat(max));   //无~或/时是否合理
+    if(txt!=''&&(!hasSymbol&&!singleFine)||(hasSymbol&&!isFine)){
+      this.beyondArea();
+      return;
+    }
 
     //输入为空时显示placeholder
     const timer = setTimeout(()=>{
@@ -234,7 +233,6 @@ class NumberDrop extends Component{
   }
   handleBlur(e){     //双击编辑blur
     const {handleLabelChange,ikey,boxMark,value} = this.props;
-    //if(!this.state.editable) return;
     this.setState({
       editable: false
     });
@@ -246,7 +244,6 @@ class NumberDrop extends Component{
     handleLabelChange && handleLabelChange({ikey,changeVal,type:boxMark,totalVal,prefix,suffix});
   }
   getSpanClass(){       //将被替换的文字选中状态显示
-    //const {hasSelect} = this.state;
     const cls = this.props.show?style['blued']:'';
     return cls;
   }
@@ -255,14 +252,13 @@ class NumberDrop extends Component{
     const spanWidth = window.getComputedStyle(this.$span.current).width;
     this.$span.current.style.minWidth=spanWidth;
     //保存输入框dom以便聚焦
-    const {saveDoms,num} = this.props;
-    //console.log(num);
+    const {saveDoms} = this.props;
     saveDoms&&saveDoms(this.$span);
-    //console.log(this.props.inputRef)
   }
   render(){
     const {prefix,suffix,show,value,handleHide,allClick} = this.props;
-    const {numEditable,placeholder,editable,hasSelect,boxTop,boxLeft} = this.state;
+    const {placeholder,editable,hasSelect,boxTop,boxLeft} = this.state;
+    //console.log(prefix,value,placeholder+'1',this.props.placeholder)
     return <div className={this.getClasses()}
                 ref={this.$cont}
                 onDoubleClick={this.changeToEdit}