标签：自动跳转 end 使用 编写 info vue.js form ips user
移动端web开发时，input等输入框在安卓和iso中都有问题，分别有：
1.iso不能点击其他区域使得输入框失去焦点
2.iso输入框失去焦点后，键盘产生的空白部分不消失
3.安卓端输入框得到焦点后，输入框不会自动跳转到可视范围
以下是我写的一个案例，对这些问题进行解决。使用vue编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no">
</head>
<body>
<div id="app">
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<form action="" id="register">
<div class="sgqformline">
<div class="con infoitem">
<div id="acName" class="inputBox">
<input type="text" name="name" placeholder="请输入您的真实姓名" @focus="isohide($event)" @blur="isoshow($event)" maxlength="40">
</div>
</div>
<div class="wrong_tips"></div>
</div>
<div class="sgqformline">
<div class="con infoitem">
<div id="acMobile" class="inputBox">
<input type="tel" name="mobile" placeholder="请输入手机号" @focus="isohide($event)" data-reg="tel" maxlength="11" @blur="isoshow($event)">
</div>
</div>
<div class="wrong_tips"></div>
</div>
</form>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var iso = false;
var nowinput = null;
var myAPP;
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
if(browser.versions.ios){
iso = true;
}
function docTouchend (event){
if (!(event.target.nodeName === ‘INPUT‘ || event.target.nodeName === ‘TEXTAREA‘)) {
// 如果点击的不是input或者textarea，让iso中输入框失去焦点
if (iso) {
// 延时时间和移动距离可以调整
setTimeout(function(){
nowinput.blur(); //解决iso不能点击其他区域使得输入框失去焦点
window.scrollBy(0,10); // 解决iso失去焦点键盘占据空白不消失
document.removeEventListener(‘touchend‘, docTouchend,false);
}, 300);
}
} else {
if (!iso) {
// 解决安卓机再次点击输入框（输入框已获得焦点），输入框不在可视区域
if (nowinput === event.target) {
setTimeout(function () {
event.target.scrollIntoView();
},400)
}
}
}
};
myAPP = new Vue({
data: function () {
return{
}
},
methods: {
isohide: function (e) {
nowinput = e.target;
document.addEventListener("touchend", docTouchend, false);
if (!iso) {
// 解决安卓机点击输入框后，输入框不在可视区域的问题
setTimeout(function () {
e.target.scrollIntoView();
}, 400);
}
},
isoshow: function (e) {
document.removeEventListener(‘touchend‘, docTouchend,false);
if (iso) {
// 解决iso失去焦点键盘占据空白不消失
window.scrollBy(0,1);
}
}
},
mounted: function () {
},
filters: {
}
})
</script>
</body>
</html>
标签：自动跳转 end 使用 编写 info vue.js form ips user
原文地址：https://www.cnblogs.com/sgqwjr/p/10370613.html
