移动端开发踩坑记之输入框的自定义

最近做移动端项目，由于之前没太多经验，所以踩了挺多的坑，现在抽空总结下,防止以后重蹈覆辙，顺便给需要的人一些帮助。
项目背景：使用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自动聚焦，实际操作下来并没有用；咨询公司经验更足的前端前辈，他们也说没法处理，最后只好搁置了。如果大家谁知道这个问题的答案，希望可以不吝赐教，万分感谢！