最近在做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. RestHighLevelClient查询es

    本篇分享的是es官网推荐的es客户端组件RestHighLevelClient的使用,其封装了操作es的crud方法,底层原理就是模拟各种es需要的请求,如put,delete,get等方式:本篇主要 ...

  2. 【ARM-Linux开发】OpenACC并行编程实战笔记

    今年运气比较好,学了cuda之后,了解到了gpu的另两种使用语言opencl和openacc,  opencl(Open Computing Language ,开放计算语言)是面向异构系统的并行编程 ...

  3. 单点登录（SSO）解决方案介绍

    一.单点登录的介绍 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用 ...

  4. [转帖]美团在Redis上踩过的一些坑-1.客户端周期性出现connect timeout

    美团在Redis上踩过的一些坑-1.客户端周期性出现connect timeout 博客分类: redis 运维 jedisconnect timeoutnosqltcp  转载请注明出处哈:http ...

  5. Keyboarding

    题目描述 思路 一开始想先写一个bfs,目标字符串要加上一个'*',表示这是一个换行符,然后一个字母一个字母的找,每次重置一下vis数组,bfs返回的结果再加上1,表示要打印这个字母,结果第一个样例没 ...

  6. （五）pdf的构成之文件体（catalog对象）

    引自:https://blog.csdn.net/steve_cui/article/details/82735039 目录(catalog): 文档目录包含对定义文档内容的其他对象的引用.它还包含声 ...

  7. 【题解】Luogu P5339 [TJOI2019]唱、跳、rap和篮球

    原题传送门 这题zsy写的是\(O(n^2)\),还有NTT\(O(n^2\log n)\)的做法.我的是暴力,\(O(\frac{a b n}{4})\),足够通过 考虑设\(f(i)\)表示序列中 ...

  8. 西门子S7-300 设置IP、子网掩码

    =============================================== 2019/7/17_第1次修改                       ccb_warlock == ...

  9. 20、Outer Apply 和 Cross Apply

    1.場合 select...caseが複雑の時 2.運用方法 SELECT * FROM stu CROSS APPLY ( --like inner join * FROM score WHERE ...

  10. PTA A1017

    A1017 Queueing at Bank (25 分) 题目内容 Suppose a bank has K windows open for service. There is a yellow ...