react 移动端H5 页面 input 获取焦点不灵敏

最新推荐文章于 2023-05-10 20:25:54 发布

嫩八

最新推荐文章于 2023-05-10 20:25:54 发布

阅读量742

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43824848/article/details/108277178

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

开发中遇到ios中input获取焦点，需要一定的点击时长，经常无法一次成功获取焦点。
解决方法：在input控件外面包裹一层div，然后在div上添加点击事件，为input手动获取焦点。

//tsx写法，先定义
1. private phoneInputs: HTMLInputElement[] = [];
2. 
<div onClick={() => this.inputClicked(index)}>
  <input
	 placeholder={item.text}
	 ref={(c) => {
	 this.phoneInputs.push(c);
     }}
  />
</div>
3. 
 inputClicked = (i) => {
   //可以设置点击标题 聚焦对应的输入框
    let j = i;
    if (i % 2 === 0) {
      j += 1;
    }
    const val = this.phoneInputs[j];
    this.phoneInputs[j].focus();
  };