最近在做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. windows zip命令

    针对 Windows 用户的提示: win不自带zip,因此 Windows 用户可以从 GnuWin32 项目页面 上下载zip ,并将 C:\Program Files\GnuWin32\bin( ...

  2. 【翻译】Flink Table Api & SQL — SQL客户端Beta 版

    本文翻译自官网:SQL Client Beta  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/sqlCl ...

  3. c# 导出excel的三种方式

    第一种:流导出 SaveFileDialog exe = new SaveFileDialog(); exe.Filter = "Execl files (*.xls)|*.xls" ...

  4. npm 的一些命令

    查看项目中是否安装某个插件 npm [name] -v [name] 为要查询的插件的名字,如果已经安装就会显示该插件的版本号 npm list 查看项目中所有已安装的插件

  5. (CSDN 迁移) jFinal找不到或无法加载主类

    错误: 找不到或无法加载主类 com.demo.common.DemoConfig 项目上右键 -> Build Path -> Order and Export 修改顺序: 从上到下依次 ...

  6. SQL Server 2000~2017补丁包

    最新更新 Product Version Latest Service Pack Latest GDR Update Latest Cumulative Update CU Release Date ...

  7. Flutter 增加三方库卡在flutter package get 的解决办法

    修改 pubspec.yaml 文件增加第三方库之后,AndroidStudio 像往常一样提示 需要 package get. 然后一直卡在 Running "flutter packag ...

  8. CLRS10.2-8练习 - 单指针值实现双向链表

    要求: Explain how to implement doubly linked lists using only one pointer value x.np peritem instead o ...

  9. 认证授权-学习笔记2-OpenId Connect

    简介 简单来说:OIDC是OpenID Connect的简称,OIDC=(Identity, Authentication) + OAuth 2.0.它在OAuth2上构建了一个身份层,是一个基于OA ...

  10. 一个牛逼的 Python 调试工具PySnooper

    原文转自:https://mp.weixin.qq.com/s/OtLr-cNethboMgmCcUx2pA PySnooper 使用起来十分简单,开发者可以在任何庞大的代码库中使用它,而无需进行任何 ...