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)的更多相关文章

  1. 20150203一些移动端H5小bug解决

    都是一些我也不知道为什么会有的bug. 1. 在三星note2,小米2,页面加载后,页面有黑块. 那么提高被盖住的部分z-index. 2. iphone5 ,ios7.0.4,上文字显示不出 那么就 ...

  2. 移动端input中的placeholder属性垂直

    今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...

  3. [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?

    移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...

  4. css---移动端网站专属BUG【苹果手机】

    最近在前端写页面的时候,遇到了三个苹果手机的专属BUG,记录下... BUG1:苹果手机 form 表单的input有阴影 解决方法: input { /* 1 */ overflow: visibl ...

  5. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  6. 移动端遇到的bug (长期更新)

    移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候,圆角是可以包住子级的,这是个很常见的场景 ...

  7. 移动端input输入框把页面顶起, 收起键盘页面复原不了问题

    我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>>  我这边提供两种解决 ...

  8. 百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法

    百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...

  9. paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决

    paip.c3p0 nullpointexcept 配置文件根路径读取bug 解决 windows ok linux犯错误... 查看loging, 初始化的时候儿jdbcurl,user,pwd都是 ...

随机推荐

  1. 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. ...

  2. Java集合List、Set、Map

    集合是 java 基础中非常重要的一部分,同样也是 Java 面试中很重要的一个知识点.所以,给王小整理了这篇关于集合的文章. 1.接口继承关系以及实现 集合类存放于 Java.util 包中,主要有 ...

  3. 多线程深入:乐观锁与悲观锁以及乐观锁的一种实现方式-CAS(转)

    原文:https://www.cnblogs.com/qjjazry/p/6581568.html 首先介绍一些乐观锁与悲观锁: 悲观锁:总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每 ...

  4. XLSReadWriteII5导入excel数据

    procedure TForm1.Button1Click(Sender: TObject); var xls: TXLSReadWriteII5; openFile: TOpenDialog; Ro ...

  5. PCL近邻搜索相关的类

    首先PCL定义了搜索的基类pcl::search::Search<PointInT> template<typename PointT> class Search 其子类包括: ...

  6. 1、Linux的安装及基本配置

    1.安装 2.登录后开启root用户 https://www.cnblogs.com/suhfj-825/p/8611436.html https://www.cnblogs.com/suhfj-82 ...

  7. AMBER: CPPTRAJ Tutorial C0

    CPPTRAJ作为PTRAJ的继任者,拥有比PTRAJ更强大的功能,本教程会简要的介绍CPPTRAJ的用法及注意事项. 需要的文件: trpzip2.gb.nc trpzip2.ff10.mbondi ...

  8. OI养老专题01:约瑟夫问题

    有M个人,其编号分别为1-M.这M个人按顺序排成一个圈.现在给定一个数N,从第一个人开始依次报数,数到N的人出列,然后又从下一个人开始又从1开始依次报数,数到N的人又出列...如此循环,直到最后一个人 ...

  9. UIElementImageShot

    MemoryStream memStream = new MemoryStream(); System.Windows.Media.Imaging.RenderTargetBitmap bmp = n ...

  10. sql where 里面判定要加 ' '

    WHERE year>=2010 and year<=2017 and indicator_code = 'SE.XPD.TOTL.GD.ZS'