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

react

最近在做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" >

<span ></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失效解决办法 的全部内容, 来源链接: utcz.com/z/382293.html

回到顶部