码迷,mamicode.com
首页 > 移动开发 > 详细

移动web开发中input等输入框问题

时间:2019-02-13 16:58:29      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:自动跳转   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>

移动web开发中input等输入框问题

标签:自动跳转   end   使用   编写   info   vue.js   form   ips   user   

原文地址:https://www.cnblogs.com/sgqwjr/p/10370613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!