最近在做webapp搜索功能时，用到两个input同时存在时，轻点input聚焦时，ios手机软键盘弹起又失效，一直在寻找合理的解决办法，现在最简单的总结回顾:

<一>bug显示

<二> 最终测试通过的修改方案

1. 安卓保持不动，原生input当点击的时候可以自动聚焦;

2. ios单个input的也是正常的，就是两个input在一起失效；

3. 当两个input在一起的时候，每一个input外面包裹一层div，里面有一个span标签。

测试代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 120px;

            height:24px;

            border: 1px solid #ccc;

            position: relative;

        }

        div span {

            display: block;

            width: 120px;

            height:24px;

            position: absolute;

            top:0;

            left:0;

        }

    </style>

</head>

<body>

    <div>

        <input type="text" id="iosInput">

        <span id="iosContainer"></span>

    </div>

</body>

<script type="text/javascript">

    iosContainer.addEventListener("click",function(e){

        iosInput.focus();

    });

</script>

</html>

备注: 我最终的代码结构,在ios手机和安卓手机表现度正常了

ios事件执行代码

componentDidMount:function(){

        if(/(APPLEWEBKIT|Safari|Android)/i.test(this._ua)) {

            $('.cmr-sr_notice').css({'position':'fixed'});

        }else{

            iosContainer_01.addEventListener("click",function(e){

                iosInput_01.focus();

            });

            iosContainer_02.addEventListener("click",function(e){

                iosInput_02.focus();

            });

        }

    },

布局结构

timelyNotice:function(){

        var _this = this,

            iosInput_01='',

            iosInput_02='';

            // ios 通过外部点击事件来取货焦点，安卓还保持原生的不动

        if(/(APPLEWEBKIT|Safari|Android)/i.test(this._ua)) {

            iosInput_01 = (

                <input type='text' placeholder='书名' maxLength='100'

                    className='co-font-biggest cmr-sr_notice-input'

                    onChange={_this.valChange.bind(_this,1)}

                    value={_this.state.valBookname}

                    onBlur={_this.inputBlur}

                    ref='valBookname'

                />

            );

            iosInput_02 = (

                <input type='text' placeholder='作者' maxLength='100'

                    className='co-font-biggest cmr-sr_notice-input'

                    onChange={_this.valChange.bind(_this,2)}

                    onBlur={_this.inputBlur}

                    value={_this.state.valAuhtorname}

                    ref='valAuhtorname'

                />

            )

        }else {

            iosInput_01 = (

                <div style={{position:'relative'}}>

                    <input type='text' placeholder='书名' maxLength='100'

                        className='co-font-biggest cmr-sr_notice-input'

                        onChange={_this.valChange.bind(_this,1)}

                        value={_this.state.valBookname}

                        id='iosInput_01'

                        onBlur={_this.inputBlur}

                        ref='valBookname'

                        />

                    <span id='iosContainer_01' style={{display:'block',width:'100%',height:'100%',position:'absolute',top:'0',left:'0'}}></span>

                </div>

            );

            iosInput_02 = (

                <div style={{position:'relative'}}>

                    <input type='text' placeholder='作者' maxLength='100'

                        className='co-font-biggest cmr-sr_notice-input'

                        onChange={_this.valChange.bind(_this,2)}

                        onBlur={_this.inputBlur}

                        id='iosInput_02'

                        value={_this.state.valAuhtorname}

                        ref='valAuhtorname'

                    />

                    <span id='iosContainer_02' style={{display:'block',width:'100%',height:'100%',position:'absolute',top:'0',left:'0'}}></span>

                </div>

            )

        }

　　　　　/**/

        return(

            <section className='cmr-sr_notice'

                style={{display:_this.state.timelyNotice}}>

                <div className='cmr-sr_notice-con' ref='mainPupop'>

                    <p className='co-font-large cmr-sr_notice-title'>填写书籍信息</p>

                    {iosInput_01}

                    <img src={_this.state.close_img}

                        className='cmr-sr_notice-img'

                        style={{"display":_this.state.close_button_01?"block":"none"}}

                        onClick={_this.emptyInput.bind(_this,1)} />

                    {iosInput_02}

                    <img src={_this.state.close_img}

                        className='cmr-sr_notice-img cmr-sr_notice-img2'

                        style={{"display":_this.state.close_button_02?"block":"none"}}

                        onClick={_this.emptyInput.bind(_this,2)} />

                    <p className='co-font-normal cmr-sr_notice-pro'>~ 该书上架后将第一时间通知您 ~</p>

                    <div className='co-font-largest cmr-sr_notice-sure'>

                        <span className='cmr-sr_notice-no' onClick={_this.closePupop}>取消</span>

                        <span

                            style={{color:_this.state.colorConfirm}}

                            className='cmr-sr_notice-yes'

                            onClick={_this.propmtBook}>提交</span>

                    </div>

                </div>

            </section>

        )

    },

react中IOS手机里面两个input同时存在时，聚焦focus失效解决办法的更多相关文章

  1. IOS 中微信 网页授权报 key[也就是code]失效 解决办法

    枪魂微信平台ios手机点击返回 网页授权失败,报key失效.已经解决,原因是授权key只能使用一次,再次使用就会失效. 解决办法:第一次从菜单中进行授权时,用session记录key和open_id. ...

  2. IIS7.5中调试.Net 4.0网站出现无厘头500错误的解决办法 (转)

    刚刚 部署了ii7的dll的有x86写的,就会出现以下这样的问题 iis 7 x86,Could not load file or assembly 'Name' or one of its depe ...

  3. Advanced Installer 中测试数据库连接提示“未发现数据源名称并且未指定默认驱动程序”的解决办法

    原文:Advanced Installer 中测试数据库连接提示"未发现数据源名称并且未指定默认驱动程序"的解决办法 最近需要制作一个安装包,安装包的要求如下: 1.用户手工填写M ...

  4. npm install 报错 error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,"d' 解决办法

    npm install 报错 : error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,& ...

  5. jquery代码修改input的value值，而页面上input框的值没有改变的解决办法

    问题描述: 在搜索框中输入一些字符,并且点击搜索框右边的五角星做收藏操作时,打开的弹框中Save Search:后面的input中的值被赋值了外面搜索框的值,但是当此次操作完成之后,再次做同样的操作, ...

  6. php中session同ip不同端口的多个网站session冲突的解决办法

    在局域网内使用IP加端口的访问方式搭了两个相同程序的站,结果发现用户在一个站下登录后,在另一个站也同时登录了,在一个退出后,另一个站也同时退出了.看了下程序发现两个站都是使用纯session方式记录登 ...

  7. H5在ios弹窗状态下调起输入法后关闭输入法页面元素错位解决办法

    最近开发移动端,有个需求:点击退款弹出文本框和发送短信按钮,输入手机号码和验证码确定退款. 发现安卓手机没毛病,但是在ios手机上点击文本框调起输入法,此时点击完成或者关闭输入法就无法正常操作了,肉眼 ...

  8. FreeRTOS操作系统，在按键中断函数中恢复被挂起的任务，程序卡死的原因和解决办法

    出现问题场景:       作为刚接触FreeRTOS实时操作系统的菜鸟,我在练习一个程序功能:按键3按下,将LED闪烁的任务挂起:按键4按下,将LED闪烁的任务恢复到就绪.按键使用外部中断.恢复就绪 ...

  9. 在Linux下安装PHP过程中，编译时出现错误的解决办法

    在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决办法 configure: error: libjpeg.(a ...

随机推荐

  1. FFmpeg 的bug

    发现一个ffmpeg 的bug, 我用老版本的ffmpeg解码播视频,对同样的视频,音频部分得到的是6通道,一直有杂音 周末呢换了新版本的ffmpeg4.2的库,得到是4,6,8三个通道在切换,我修改 ...

  2. Oracle 拆分列为多行 Splitting string into multiple rows in Oracle

    =========================== The table is as follows: Name | Project | Error 108 test Err1, Err2, Err ...

  3. 【maven学习】构建maven web项目

    Maven Web应用 创建Web应用程序 要创建一个简单的java web应用程序,我们将使用Maven的原型 - web应用插件.因此,让我们打开命令控制台,进入到C: MVN目录并执行以下命令m ...

  4. python从写定时器学习Thread

    目录 python从写定时器学习Thread Timer 对象 粗陋的循环定时器 更 pythonic 循环定时器 FAQ python从写定时器学习Thread python 如何写一个定时器,循环 ...

  5. AutoIt实现软件自动化安装

    AutoIt下载安装 1.下载:https://www.autoitscript.com/site/autoit/downloads/ 2.安装,一直点下一步 3.安装好可以看到开始菜单如下(需要用到 ...

  6. 分页Model

    <?php namespace Admin\Model; use Think\Model; class PageModel extends Model{ /* *此函数分页函数.传入表名和当前页 ...

  7. SPFA + 链式前向星(详解)

    求最短路是图论中最基础的算法,最短路算法挺多,本文介绍SPFA算法. 关于其他最短路算法,请看我另一篇博客最短路算法详解 链式前向星概念 简单的说,就是存储图的一个数据结构.它是按照边来存图,而邻接矩 ...

  8. Docker容器跨主机通信之：OVS+GRE

    一.概述 由于docker自身还未支持跨主机容器通信,需要借助docker网络开源解决方案 OVS OpenVSwich即开放式虚拟交换机实现,简称OVS,OVS在云计算领域应用广泛,值得我们去学习使 ...

  9. Selenium+Java（十）Selenium常用方法

    前言: 通过前几篇博客的已经了解了元素如何定位,提示框下拉框如何处理,多表单,鼠标键盘操作.此篇博客来介绍拿到想应的driver对象后如果对于对象做一些操作. get //打开网站 driver.ge ...

  10. aop 打印请求信息

    项目中使用 AOP 打印请求信息,打印响应信息.package com.example.aspect; import com.alibaba.fastjson.JSON;import com.goog ...