react中IOS手机里面两个input同时存在时，聚焦focus失效解决办法

最近在做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失效解决办法

最新文章

热门文章