uniapp微信小程序实现评论键盘弹出的时候有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序实现评论键盘弹出的时候有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：我现在有一个需求就是要实现输入评论有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点安卓真机测试没有问题

原因：

1. iOS 上输入框聚焦有一个显式的动画过程,如果过快失去焦点会导致动画未完成就被打断,从而键盘会闪现又消失的情况。

2. 你的点击事件回调中可能直接触发了第二个输入框失去焦点的逻辑,比如调用了 uni.hideKeyboard() 方法。

3. iOS 的键盘有一个晃动检测的机制,如果短时间内聚焦状态频繁切换,会认为是程序错误导致的无意聚焦,会自动还原。

4. 两个输入框的父容器有渲染问题,导致输入框的位置计算错误,无法正确显示键盘。

5. 你的点击事件回调函数做了页面跳转或组件重新渲染的操作,导致输入框被重新创建,无法维持焦点状态。

我的解决方法：
由于我这里出现的问题是第二个input框聚焦了然后又马上失焦然后我考虑可能是第三条的原因因为我点击第一个input框后就切换了第二个input框的聚焦状态这里可能切换太快然后就给改变状态的地方加上了一个定时器问题就解决啦

代码：

<view class="feature_Input">
						<image src="https://img.icons8.com/metro/26/878787/edit-property.png" mode=""></image>
						<input :adjust-position="false" placeholder="请输入内容"  @click="clickPopup" show-confirm-bar = false disabled="true" />
				</view>
				<view  class="message-input" :style="{bottom:inputBottom + 'px'}">
						<view class="textarea_box">
							<view class="mes_textarea"> 
								<textarea
								 :adjust-position="false"
								 cursor-spacing="20"
								 :value='inputText'
								 :style="{ width: textareaWidth + 'rpx'}"
								 maxlength="200"
								 type="text"
								 placeholder-class="input-placeholder"
								 :placeholder="commentPlaceholder.placeholder"
								 @focus="textareaFocus"
								 @input="changeValue"
								 @blur="textareaBindBlur"
								 :show-confirm-bar = false
								 behavior="height" 
								 :focus = "focusText"
								 auto-height/>
								 <view class="textarea_symbol" :style="{width:symbolWidth}">
								 	<view class="" :style="{'justify-content': symbolContent}">
								 		<image src="../../static/icon/aite_1.png" mode=""></image>
								 		<image src="../../static/icon/weixiao_1.png" mode=""></image>
								 		<image src="../../static/icon/tupian_1.png" mode=""></image>
								 	</view>
								 </view>
							</view>
							 <button @click="sendmsg">发送</button>
						</view>
						<KeyboardHeight></KeyboardHeight>
				</view>

js文章来源地址https://www.toymoban.com/news/detail-760824.html

clickPopup(state){
				console.log('点啦--------');
				this.inputBottom = 0
				this.replyId = 0
				this.sign = 1
				this.commentPlaceholder = {
					userId:this.itemData.f_openid,
					placeholder:'说点什么呢~',
				}
				setTimeout(()=>{
					 this.focusText = true
				},100)
				console.log('focusText状态',this.focusText);
			},

到了这里，关于uniapp微信小程序实现评论键盘弹出的时候有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！