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

发表于 | 分类于

最近做移动端项目，由于之前没太多经验，所以踩了挺多的坑，现在抽空总结下,防止以后重蹈覆辙，顺便给需要的人一些帮助。
项目背景：使用react框架构建 企业微信应用程序
遭遇问题：
1、输入框在IOS系统中，键盘‘换行’改为‘搜索’
实现方法：设置input标签type=’search’，同时在input标签外加一个form标签，并设置action=’javascript:void 0’（这是重点，用来阻止表单默认提交操作，前面我在网上找的方法说是把action设置为‘javascript:return true’，但实际发现这样做在chrome中会报错，提示return只能在js代码块中使用），具体代码如下：

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

2、输入中文时重复触发的问题，移动端输入中文时，每输入一个字母都会触发input事件，导致重复触发；
解决方法：依据‘compositionstart’和‘compositionend’这两个输入事件，添加标志位来判断中文输入是否完成，这两个事件的详细描述可点击查看：compositionstart 、compositionend；具体实现：
1）、在组件生命周期钩子函数中添加事件监听

1
2
3
4
5
6
7
8
9
10
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）、定义回调方法，根据标志位，判断是否进行操作

1
2
3
4
5
6
7
8
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），具体代码如下：

1
2
3
4
5
6
7
 inputRef.addEventListener('keydown', this.keyDownChange);
....
keyDownChange = (e) => {
   if(e.keyCode===13){  //
     this.onGoToResult();
   }
 };

4、输入框光标定位问题，输入框如果存在之前的输入值，重新获取焦点时，光标会定位到文字的前面，因此需要手动设置光标的位置，实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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自动聚焦，实际操作下来并没有用；咨询公司经验更足的前端前辈，他们也说没法处理，最后只好搁置了。如果大家谁知道这个问题的答案，希望可以不吝赐教，万分感谢！