移动web开发中input等输入框问题
移动端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等输入框问题的更多相关文章
- Web 开发中 9 个有用的提示和技巧
在本文中,我们给出 9 个有用的 HTML.CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开 ...
- 第123天:移动web开发中的常见问题
一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...
- 移动Web 开发中的一些前端知识收集汇总
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...
- Web开发中设置快捷键来增强用户体验
从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...
- web开发中的安全问题
web开发中很多东西由前段来负责判断,比如常见的邮箱 电话号码,前端判断到不是一个正确的格式,在你点击提交时候提示你格式填错了,然后不请求后端php,直到你填写正确的格式为止.这种其实可以修改js或者 ...
- web开发中经常使用的js
将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...
- Python Web开发中的WSGI协议简介
在Python Web开发中,我们一般使用Flask.Django等web框架来开发应用程序,生产环境中将应用部署到Apache.Nginx等web服务器时,还需要uWSGI或者Gunicorn.一个 ...
- 详细阐述Web开发中的图片上传问题
Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
随机推荐
- VUE 参数共享问题
**标黄 export default { data () { return { msg: "这是一个变量", xx:"", } }, mounted : fu ...
- Centos7.3安装和配置Tomcat8
1.下载tomcat8压缩包 下载地址:https://pan.baidu.com/s/1ONIq3S5YjbCsET1rA13lGA 2.通过xftp工具将压缩包上传到usr/java下,然后使用下 ...
- 工程经验记录yolo框下移引发的思考
事件叙述: 缘起:yolo检测框,在项目开始之前由于在一些场景下观察到yolo的框在大车检测的时候,回归的位置不好,一些车辆的尾部会被漏掉,特别是车牌部分,恰好被框在外面的时候,在后续就无法进行车牌检 ...
- Lock和Synchronized
1.synchronized无法判断是否获取锁的状态,Lock可以判断是否获取锁2.Lock中的某些锁允许对共享资源的并发访问,如ReadWriteLock读写锁,readLock()获取读锁,wri ...
- face++静态库转为动态库之二
上一篇的时候,已经介绍了如何将carthage转为动态库.这一篇,我们是单纯的建一个动态库.还是以face++为例 查看上一篇: face++静态库转为动态库 制作动态库 1.创建一个工程MGLive ...
- 安装mongodb服务
摘要:https://www.cnblogs.com/z-x-y/p/9305635.html 欢迎转载,转载请标明出处:https://www.cnblogs.com/z-x-y/p/9305635 ...
- nginx安装SSL证书,并强制跳转https访问
网站最初是nginx代理80端口,实现http访问的.现在要安装SSL证书,使用https访问. 我的nginx根目录是/usr/local/nginx,将申请的SSL证书和key放在/usr/loc ...
- 激光三角法点云重建分享——halcon 方法
如今视觉应用方面单纯依靠2D图像解决问题存在很多问题.稳定性差.定位不准确.还有配合机器人抓取方面只能抓高度一致的物品.其实在Halcon算法库有非常强大的三维算法.包括点云重建.激光三角法(2D相机 ...
- http协议中的响应代码从 1xx ~ 5xx,一共有41种
http协议中的响应代码从 1xx ~ 5xx,一共有41种 http://how2j.cn/k/http/http-response-code/572.html
- angular 4 实战开发--安卓兼容问题(1)
首先我强调下我只是个菜鸟,大神不喜勿喷. 先介绍下项目背景,主要是公司的官网h5 ,架构用的是angular4 有点大材小用的赶脚,but ,公司要求. 在项目主功能做的差不多了.交给测试,这时候发现 ...