移動端開發踩坑記之輸入框的自定義

最近做移動端項目，由於之前沒太多經驗，所以踩了挺多的坑，現在抽空總結下,防止以後重蹈覆轍，順便給需要的人一些幫助。
項目背景：使用react框架構建 企業微信應用程序
遭遇問題：
1、輸入框在IOS系統中，鍵盤‘換行’改爲‘搜索’
實現方法：設置input標籤type=‘search’，同時在input標籤外加一個form標籤，並設置action=‘javascript:void 0’（這是重點，用來阻止表單默認提交操作，前面我在網上找的方法說是把action設置爲‘javascript:return true’，但實際發現這樣做在chrome中會報錯，提示return只能在js代碼塊中使用），具體代碼如下：

 <form  action="javascript:void 0" >
      <input type={'search'}  maxLength={'10'}  ref={‘inputRef’} />
  </form>

2、輸入中文時重複觸發的問題，移動端輸入中文時，每輸入一個字母都會觸發input事件，導致重複觸發；
解決方法：依據‘compositionstart’和‘compositionend’這兩個輸入事件，添加標誌位來判斷中文輸入是否完成，這兩個事件的詳細描述可點擊查看：compositionstart 、compositionend；具體實現：
1）、在組件生命週期鉤子函數中添加事件監聽

 componentDidMount() {
    let inputRef = this.refs['inputRef'];
    inputRef.addEventListener('compositionstart', function(e){//非直接的文字輸入時（鍵盤輸入中文的拼音）
      e.target.isNeedPrevent = true ;
    });
    inputRef.addEventListener('compositionend', function(e){//直接輸入文字後（鍵盤選擇真實的漢字）
      e.target.isNeedPrevent = false ;
    });
    inputRef.addEventListener('input', this.Inputchange);
  }

2）、定義回調方法，根據標誌位，判斷是否進行操作

  Inputchange(e){
    setTimeout(()=>{  //採用延時進行節流
      if(!e.target.isNeedPrevent && e.target.oldValue !== e.target.value){   //判斷輸入是否完成以及值是否變化
        e.target.oldValue = e.target.value;
        this.props.onInputChange(e.target.value); 
      }
    }, 10);
  }

3、手機軟鍵盤點擊‘搜索’事件監聽
實現方法：給輸入框綁定‘keydown’事件，在回調函數中判斷是否是點擊‘搜索’鍵（keyCode=13），具體代碼如下：

  inputRef.addEventListener('keydown', this.keyDownChange);
 ....
 keyDownChange = (e) => {
    if(e.keyCode===13){  //
      this.onGoToResult();
    }
  };

4、輸入框光標定位問題，輸入框如果存在之前的輸入值，重新獲取焦點時，光標會定位到文字的前面，因此需要手動設置光標的位置，實現代碼：

  autoFocus(){
    setTimeout(() => {
      if(this.refs['inputRef']){
        this.refs['inputRef'].focus();
        let obj = this.refs['inputRef'];
        let len = obj.value.length;
        if (document.selection) {   //兼容IE
          let sel = obj.createTextRange();
          sel.moveStart('character', len);
          sel.collapse();
          sel.select();
        } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') { //chrome等瀏覽器
          obj.selectionStart = obj.selectionEnd = len;/*光標由兩部分組成，即selectionStart和selectionEnd，一般是相等的，但在選中一段文字全選時，他們的差值就是所選文字的個數。*/
        }
      }
    }, 100);
  }

以上就是對移動端中輸入框進行自定義的幾個小技巧，總的來說，並不難理解，只是涉及到的知識點比較偏，需要自己親自踩一遍坑才能知道怎麼處理。

另：
       在ios系統中，還碰到一個貌似無解的問題，就是輸入框的自動聚焦問題，調用input的focus()方法，在安卓系統中可以實現自動聚焦，我自己10.3版本的ios系統也沒問題，但是在11.3以上版本中，這樣調用不生效，原因貌似是高版本的ios系統禁止非用戶操作讓輸入框聚焦；
       針對這個問題，在網上找過一些方法，都未實現，比如：處理ios自動聚焦，實際操作下來並沒有用；諮詢公司經驗更足的前端前輩，他們也說沒法處理，最後只好擱置了。如果大家誰知道這個問題的答案，希望可以不吝賜教，萬分感謝！