数字框类型兼容firefox26,2312

src/components/NumberDrop/index.jsx

@@ -17,6 +17,7 @@ class NumberDrop extends Component{
     super(props);
     this.state={
       /*editable:false,      //标签是否可输入*/
+      value:props.value||'',
       timer:null,
       sltTimer:null,
       blurTimer:null,
@@ -73,15 +74,15 @@ class NumberDrop extends Component{
       hasSelect:false
     });
   }
-  handleNumFocus(e){       //数字框可编辑状态下聚集事件，处理是否显示下拉等
-    const {placeholder} = this.state;
+  handleNumFocus(e){
+    /*const {placeholder} = this.state;
     const val = e.target.innerText.trim();
     //console.log(33,e.target.innerText,placeholder,e.target.innerText.trim() == placeholder)
     if(val!=''&&val == placeholder){
       this.setState({
         placeholder:''
       });
-    }
+    }*/
     e.stopPropagation();
   }
   handleKeyDowm(e){
@@ -93,14 +94,15 @@ class NumberDrop extends Component{
   }
   handleNumClick(e){     //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
     e.stopPropagation();
-    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
+    const {show,handleShow,ikey,id,patId,handleHide} = this.props;
     if(show) {
       handleHide && handleHide();
       return;
     }else{
       this.$span.current.focus();
       this.setState({
-        hasSelect:false
+        hasSelect:false,
+        placeholder:''      //火狐26placeholder点击不隐藏bug修改
       });
       handleShow&&handleShow({ikey,id:patId||id});
     }
@@ -137,7 +139,7 @@ class NumberDrop extends Component{
     }*/
     //输入超出合理范围或输入不是数字提示且清空
     const needCompare=min!=undefined&&max!=undefined;
-    const txt = e.target.innerText.trim();
+    const txt = e.target.innerHTML.replace(/ $|^ /,'');//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));   //无～或/时是否合理
@@ -148,7 +150,7 @@ class NumberDrop extends Component{
 
     //输入为空时显示placeholder
     const timer = setTimeout(()=>{
-      if(!e.target.innerText.trim()){
+      if(!e.target.innerHTML.replace(/&nbsp;$|^&nbsp;/,'')){
         this.setState({
           placeholder:this.props.placeholder
         });
@@ -158,7 +160,7 @@ class NumberDrop extends Component{
       blurTimer:timer
     });
 
-    const val = e.target.innerText.trim();
+    const val = e.target.innerHTML.replace(/&nbsp;$|^&nbsp;/,'');//e.target.innerText.trim();
     const {placeholder} = this.state;
     let text = val===placeholder?'':val;
     //e.target.innerText = '';      //避免出现重复输入值
@@ -166,12 +168,16 @@ class NumberDrop extends Component{
   }
   handleSpanInp(e){   //数字框输入事件
     e.stopPropagation();
+    const txt = e.target.innerHTML.replace(/&nbsp;$|^&nbsp;/,'');
+    this.setState({
+      value:txt
+    });
     const {handleHide} = this.props;
     handleHide&&handleHide();
   }
   getClasses(){         //整个标签是否有值的状态
-    const {hideTag,placeholder,value,isImports} = this.props;
-    const val = value;
+    const {hideTag,placeholder,isImports} = this.props;
+    const val = this.state.value;
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
     const noTag = hideTag?style['no-tag']:'';
@@ -200,7 +206,8 @@ class NumberDrop extends Component{
       return
     }
     this.setState({
-      placeholder:nextProps.placeholder
+      placeholder:nextProps.placeholder,
+      value:nextProps.value
     })
   }
   render(){
@@ -215,7 +222,7 @@ class NumberDrop extends Component{
             contentEditable={true}
             style={{minWidth:'10px',display:'inline-block',textAlign:'center'}}
             ref = {this.$span}
-            onKeyUp={this.handleKeyDowm}
+            onkeyup={this.handleKeyDowm}
             onBlur={this.numInpBlur}
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}