tips: 这个问题网上我还没有搜到解决方案，，，都是些只会复制别人文章还重复还不写来源的人，，不想看啰嗦文章的话解决方案就在第二个板块，直接用就行。

问题描述

在这里插入图片描述
可以参考上图，很影响体验

解决方法

如果使用了fastclick的话，可以修改以下代码就能解决问题

我理解的是checkbox和radio这些dom应该获得focus而不是label去获得，所以把this.focus(targetElement);改为this.focus(forElement);

if (targetTagName === 'label') {
	forElement = this.findControl(targetElement);
	if (forElement) {
		// this.focus(targetElement); //把targetElement改为forElement即可
		this.focus(forElement);
		if (deviceIsAndroid) {
			return false;
		}

		targetElement = forElement;
	}
}

踩坑历程

1.首先猜测定位受到了影响

网上一搜清一色的都是要监听失去焦点时，让页面滚动到顶部

<input class="input" placeholder="输入手机号" max="11" min="11" maxlength="11" v-model="mobile" @blur="blurIn"/>
blurIn() {
　　window.scroll(0, 0)
}

what？？我是要回底部啊，，，，那就改成这个 window.scroll(0, document.body.scrollHeight)
保存，打包，刷新乍一看握草！！！！np！！但是在底部为啥还能往下滚留白还是在啊！失败了！！
期间还看到了说postion换成absolute，static的等等一堆都不好使

2.可能是v-touch:tap锅

上地铁前想到了可能是因为v-touch:tap的锅？？？不是一个正经的点击事件所以出bug了？？？？因为之前总会遇到ios需要点击两次才能触发一些事件的问题，，算了都下班了明天再看吧。。

第二天一早到公司就打开电脑开始试验昨天的想法，不出所料，果然还是不行，，换成click依然没有效果。。。。那么问题来了到底咋回事儿吗（灵光一闪）突然想到会不会是和单选框有关系，因为之前一直没有这个问题，点其他的表单ok吗？

又经过一番尝试发现好像只有checkbox和radio有问题…为啥为啥为啥啊…因为设置了label？！然后尝试性的点击了一下radio而不是点击label what？？？竟然正常收回了！！！

3.emm也许是原生表单（Label）兼容性较差？

终于有了重大的突破啊，，是它！是它！就是它！<label> 但是看了我的代码好像没啥问题啊为啥还是不行啊，难道和vue还有关系吗（因为公司项目是vue写的）？？oh my god！那就写个测试demo吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
	<form action="">
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a1"> <label for="a1">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a2"> <label for="a2">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a3"> <label for="a3">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a4"> <label for="a4">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a5"> <label for="a5">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a6"> <label for="a6">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a7"> <label for="a7">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a8"> <label for="a8">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a9"> <label for="a9">测试</label></div>
		<div style="padding:2rem 0rem;"><input type="radio" name="bbb" id="a10"> <label for="a10">测试</label></div>
		<input type="text" name="aaaaa" id="" style="position:fixed;bottom: 0px;">
	</form>
</body>
</html>

打开url，输入，失去焦点！！！竟然是好使的，但是好像不是那么丝滑，引入一个fastclick吧，然后…竟然又出来这种问题了！！！又有了突破性进展fastclick

4.竟然是fastclick的锅…

网上搜索了一波关于fastclick和ios的问题，有挺多文章的，但是好像没有说到label相关和回弹有关系的。。。emm那只能自己找了，ctrl+shift+f 搜索了一下插件里面有哪些是label终于让我在560行找到了这坨代码。

if (targetTagName === 'label') {
	forElement = this.findControl(targetElement);
	if (forElement) {
		this.focus(targetElement);
		if (deviceIsAndroid) {
			return false;
		}

		targetElement = forElement;
	}
}

<label>的存在是为了给input做标记的，点击它，就会触发此控件，浏览器就会自动将焦点转到和标签相关的表单控件上。
那么为啥这边fastclick这里要把fucos给label都不给它关联的input呢？？？离谱，，，，，所以只要把this.focus(targetElement);改为this.focus(forElement);就可以啦

完结~ ~ ~
撒花~ ~ ~

卖烤冷面的郭师傅

原创文章 2 获赞 1 访问量 178

关注私信

ios键盘收起，页面不会恢复到输入前的状态