最近在做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. 服务器系统启动之所以比PC慢很多

    服务器系统启动之所以比PC慢很多, 第一个是:服务器底层还有一套硬件和固件,叫做IPMI系统,这套系统需要时间来引导和载入.载入IPMI后,它才会载入BIos来继续引导.这个占主要时间,尤其是冷启动的 ...

  2. Mysql 添加用户并授所有权

    创建用户并授权GRANT ALL PRIVILEGES ON *.* TO 'caoxiaobo'@'%' IDENTIFIED BY 'Caoxiaobo0917!' WITH GRANT OPTI ...

  3. jquery如何生成图片验证码

    jQuery(function($){ /**生成一个随机数**/ function randomNum(min, max) { return Math.floor(Math.random() * ( ...

  4. Linux文件的基本操作函数

    1.Linux文件的基本操作 Linux文件的基本操作主要包括了文件的创建.打开.读写和关闭等基本操作. 1.1.文件操作系统调用 (1)创建文件系统函数 int creat(const char * ...

  5. git revert commitid

    是生成一个和commitid的提交完全相反的提交.类似倒转.

  6. MQTT的Res接口发布消息

    MQTT(这里采用的V2版本)发布消息的常见方法: 1.通过MQTT客户端连接MQTT服务器,建立长连接,通过接口发布消息 最常见的客户端: <dependency> <groupI ...

  7. 最近公共祖先 LCA 递归非递归

    给定一棵二叉树,找到两个节点的最近公共父节点(LCA).最近公共祖先是两个节点的公共的祖先节点且具有最大深度.假设给出的两个节点都在树中存在. dfs递归写法 查找两个node的最近公共祖先,分三种情 ...

  8. python并发编程之IO模型 同步 异步 阻塞 非阻塞

    IO浅谈 首先 我们在谈及IO模型的时候,就必须要引入一个“操作系统”级别的调度者-系统内核(kernel),而阻塞非阻塞是跟进程/线程严密相关的,而进程/线程又是依赖于操作系统存在的,所以自然不能脱 ...

  9. [python 2.x] xml.etree.ElementTree module

    XML 文件:xmlparse.xml <?xml version="1.0" encoding="UTF-8" standalone="no& ...

  10. 挂载一个NFS共享

    在 system2 上挂载一个来自 system1.group8.example.com 的NFS共享,并符合下列要求: 1./public 挂载在下面的目录上 /mnt/nfsmount 2./pr ...