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> ) },
