移动端h5唤起键盘_移动端H5监听键盘弹出和收起

const isIOS= /iphone|ipad|ipod/.test(ua);

const isAndroid= /android/.test(ua);if(isIOS) {

let isReset= true; //是否归位

this.focusinHandler = () =>{

isReset= false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件

focusInput();

};this.focusoutHandler = () =>{

isReset= true;

setTimeout(()=>{//当焦点在弹出层的输入框之间切换时先不归位

if(isReset) {

window.scroll(0, 0); //确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位

blurInput();

}

},30);

};

document.body.addEventListener(‘focusin‘, this.focusinHandler);

document.body.addEventListener(‘focusout‘, this.focusoutHandler);

}if(isAndroid) {

const originHeight= document.documentElement.clientHeight ||document.body.clientHeight;this.resizeHandler = () =>{

const resizeHeight= document.documentElement.clientHeight ||document.body.clientHeight;

const activeElement=document.activeElement;if (resizeHeight

if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {

setTimeout(()=>{

activeElement.scrollIntoView({ block:‘center‘ });//焦点元素滚到可视区域的问题

}, 0)

focusInput();

}

}else{//键盘收起后逻辑

blurInput();

$(".input").blur();

}

};

window.addEventListener(‘resize‘, this.resizeHandler);

}functionfocusInput() {var $zi1 = $("header .zi1");var $zi2 = $("header .zi2");var $img = $("header img");

$zi1.animate({"top":"-28px"},200);

$zi2.fadeIn(200);

$img.animate({"height":"0"},200);

}functionblurInput() {var $zi1 = $("header .zi1");var $zi2 = $("header .zi2");var $img = $("header img");

$zi1.show().animate({"top":"0"},200);

$zi2.fadeOut(200);

$img.animate({"height":"130px"},200);

}functionshowPW(target) {var $target =$(target);var $icon = $target.children("i");var $input = $("#pwInput");var $input2 = $("#pwInput2");if ($icon.hasClass("icon-eye4")) {

$icon.attr("class", "iconfont icon-eye5");

$input.hide();

$input2.show();

}else{

$icon.attr("class","iconfont icon-eye4");

$input.show();

$input2.hide();

}

移动端h5唤起键盘_移动端H5监听键盘弹出和收起相关推荐

移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
移动端h5唤起键盘_移动端javascript拉起软键盘
先上图来镇楼坑啊,知乎居然不支持gif,点这里看一.文本输入文本输入html元素 1.input标签,且type类型为text,number,search,tel,password,email, ...
android 键盘弹出监听,奇技淫巧之-Android监听键盘弹出与隐藏事件
CaptainAndroid.png 相信看到这个标题,大家都会潜意识觉得:Activity中没有可以复写的方法么?或者说,没有什么listener可以让我们使用么? 抱歉,真的没有,我们潜意识都是以 ...
vant 软键盘_移动端软键盘监听（弹出，收起），及影响定位布局的问题
移动端软键盘监听(弹出,收起),及影响定位布局的问题一:移动端软键盘监听(弹出,收起) 1.监听resize ( Android) var winHeight = $(window).height( ...
IOS关于键盘的弹出和收起
IOS关于键盘的弹出和收起 UITextField *text = [[UITextField alloc]init]; [text becomeFirstResponder]; 让键盘成为第一响应者 ...
Android软键盘弹出和收起的监听
Android软键盘弹出和收起的监听 1.直接调用 SoftKeyboardHelper softKeyboardHelper = softKeyboardHelper = new SoftKeybo ...
vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
Android Tv端仿优酷酷喵——播放界面下拉弹出选项窗
自己写了一个Andorid TV端动画实例,主要是仿优酷酷喵里的下拉弹窗的效果,如下图: 这里把弹框写成了一个弹出的dialog,把dialog的背景设成黑色半透明,然后在activity中监听下键弹 ...
Android页面监听虚拟键盘弹出、收起
js 移动端关于页面布局,如果底部有 position: fixed 的盒子, 又有input,当软键盘弹出收起都会影响页面布局. 如图: 页面这时候Android可以监听resize事件,代码如下, ...

移动端h5唤起键盘_移动端H5监听键盘弹出和收起

移动端h5唤起键盘_移动端H5监听键盘弹出和收起相关推荐

最新文章

热门文章