iso移动端input的bug解决(vue)
iso中input很奇怪,点击空白地方,键盘也不会消失,影响页面中其他功能
解决办法: 点击的元素不是input或者textarea,那么就让上一个获得焦点的输入框失去焦点。
涉及的代码:
<input type="tel" @focus="isohide($event)">
var iso = false;
var nowinput = null;
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')) {
setTimeout(function(){
nowinput.blur();
window.scrollBy(0,10); // 解决失去焦点后,苹果的页面窗口可能卡住,让滚动条滚动一点即可。
document.removeEventListener('touchend', docTouchend,false);
}, 300);
}
}; vue中methods
methods: {
isohide: function (e) {
if (iso) {
nowinput = e.target;
document.addEventListener("touchend", docTouchend, false);
}
}
}
iso移动端input的bug解决(vue)的更多相关文章
- 20150203一些移动端H5小bug解决
都是一些我也不知道为什么会有的bug. 1. 在三星note2,小米2,页面加载后,页面有黑块. 那么提高被盖住的部分z-index. 2. iphone5 ,ios7.0.4,上文字显示不出 那么就 ...
- 移动端input中的placeholder属性垂直
今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...
- [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?
移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...
- css---移动端网站专属BUG【苹果手机】
最近在前端写页面的时候,遇到了三个苹果手机的专属BUG,记录下... BUG1:苹果手机 form 表单的input有阴影 解决方法: input { /* 1 */ overflow: visibl ...
- 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...
- 移动端遇到的bug (长期更新)
移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候,圆角是可以包住子级的,这是个很常见的场景 ...
- 移动端input输入框把页面顶起, 收起键盘页面复原不了问题
我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>> 我这边提供两种解决 ...
- 百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法
百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...
- paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决
paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决 windows ok linux犯错误... 查看loging, 初始化的时候儿jdbcurl,user,pwd都是 ...
随机推荐
- org.springframework.boot.web.server.WebServerException: Unable to create tempDir. java.io.tmpdir is set to C:\Users\ADMINI~1\AppData\Local\Temp\2\
问题原因:springboot创建临时文件找不到对应的目录 解决办法:1. 重新指定临时文件位置 java -Djava.io.tempdir=D:/tmpdir -jar -my_project. ...
- Java集合List、Set、Map
集合是 java 基础中非常重要的一部分,同样也是 Java 面试中很重要的一个知识点.所以,给王小整理了这篇关于集合的文章. 1.接口继承关系以及实现 集合类存放于 Java.util 包中,主要有 ...
- 多线程深入:乐观锁与悲观锁以及乐观锁的一种实现方式-CAS(转)
原文:https://www.cnblogs.com/qjjazry/p/6581568.html 首先介绍一些乐观锁与悲观锁: 悲观锁:总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每 ...
- XLSReadWriteII5导入excel数据
procedure TForm1.Button1Click(Sender: TObject); var xls: TXLSReadWriteII5; openFile: TOpenDialog; Ro ...
- PCL近邻搜索相关的类
首先PCL定义了搜索的基类pcl::search::Search<PointInT> template<typename PointT> class Search 其子类包括: ...
- 1、Linux的安装及基本配置
1.安装 2.登录后开启root用户 https://www.cnblogs.com/suhfj-825/p/8611436.html https://www.cnblogs.com/suhfj-82 ...
- AMBER: CPPTRAJ Tutorial C0
CPPTRAJ作为PTRAJ的继任者,拥有比PTRAJ更强大的功能,本教程会简要的介绍CPPTRAJ的用法及注意事项. 需要的文件: trpzip2.gb.nc trpzip2.ff10.mbondi ...
- OI养老专题01:约瑟夫问题
有M个人,其编号分别为1-M.这M个人按顺序排成一个圈.现在给定一个数N,从第一个人开始依次报数,数到N的人出列,然后又从下一个人开始又从1开始依次报数,数到N的人又出列...如此循环,直到最后一个人 ...
- UIElementImageShot
MemoryStream memStream = new MemoryStream(); System.Windows.Media.Imaging.RenderTargetBitmap bmp = n ...
- sql where 里面判定要加 ' '
WHERE year>=2010 and year<=2017 and indicator_code = 'SE.XPD.TOTL.GD.ZS'