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都是 ...
随机推荐
- 声明式开发 & 命令式开发
何为声明式开发,何又为命令式开发~~~ 这里我不做太多概念的剖析,我们只要明确一个: 声明式开发只是告诉计算机需要什么,而不是把每一步都计划好:典型代表为React: 命令式开发则是每一步明确的去操作 ...
- android studio application应用打包jar
转载: https://blog.csdn.net/xiayiye5/article/details/79639044 首先我们来说下打成jar包的分类: 1.application应用打成jar包 ...
- ADB——模拟手机按键输入
基本命令 adb 模拟按键输入的命令主要通过 input 进行 Usage: input [<source>] <command> [<arg>...] The s ...
- JSP页面、包含
JSP页面概念: html称为静态页面,而与相对的JSP称为动态页面(一个特殊的servlet)二者的区别在于,html只能定义css,js.但是在JSP中除了html可以定义的文件外,还可以定义Ja ...
- 【QT】Installer requires Xcode Version 5.0.0 for Qt download if toolchain not found
When I install QT in MacOS 11.3.6, it prompts I need to install xcode then I install xcode but it wa ...
- python类与对象-如何创建可管理的对象属性
如何创建可管理的对象属性 问题举例 在面向对象编程中, 我们把方法看作对象的接口, 直接访问对象的属性可能是不安全的,或设计上不够灵活. 但是使用调用方法在形式上不如访问属性简洁. circle.ge ...
- Cocos Creator(圆形遮罩头像)动态增加遮盖层 mask 并设为圆形生效
var avatar = new cc.Node('avatar'); var sp = node.addComponent(cc.Sprite); sp.spriteFrame = new cc.S ...
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- css3 样式过度器 Transition
transition 简写属性,用于在一个属性中设置四个过渡属性. 1. transition 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: eg: div{wi ...
- 问题 1690: 算法4-7:KMP算法中的模式串移动数组
题目链接:https://www.dotcpp.com/oj/problem1690.html 题目描述 字符串的子串定位称为模式匹配,模式匹配可以有多种方法.简单的算法可以使用两重嵌套循环,时间复杂 ...