来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

微信h5 input输入框软键盘关闭后,页面无法回到正常位置

function iptblur(){ var u = navigator.userAgent; var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); if(isiOS) { // 判断是否为IOS系统 setTimeout(() = { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0));}, 100); } }

9.iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

可以通过正则去掉      this.value = this.value.replace(/u2006/g, '');

html:

3. 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)

问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看。首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus、click、change),有两种解决方案,

1.是通过层显示以后加入对应的class名控制,截断显示层下方可获取焦点元素的事件获取

2.是通过将可获取焦点元素加入的disabled属性,也可以利用属性加dom锁定的方式(disabled的一种变换方式)

h5页面有个弹框,里面有input输入框,需要用户输入内容。在ios微信中,当第一次输入内容后,发现页面点击不了,点击一些地方出现错位的情况。

    C、无法同时播放多音频

    在android设备中,播放后一音频会打断前一音频,而不会同步播放,这个是目前系统资深决定的,我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放,达到与预期接近的音频效果。

代码如下:

23. Zepto点透的解决方案

zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstarttouchend)需要冒泡到document上才会触发,而在冒泡到document之前,用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

引入fastclick.js,在页面中加入如下js代码

1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );

或者有zepto或者jQuery的js里面加上

1 $(function() {
2     FastClick.attach(document.body);
3 });

当然require的话就这样:

1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);

方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });

方案三:延迟一定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    

 24. user-select:none;造成iPhone5上输入框的光标不显示,而光标不显示造成无法连续输入。

解决方案:

16.fixed定位缺陷

ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位

ios4下不支持position:fixed

解决方案: 可用iScroll插件解决这个问题

在ios微信里面打开h5页面,当遇到input输入框调出软键盘时候。用户输入完成失去焦点,键盘收回后,会发现input输入框的位置发现变化的情况。这里需要监听失焦事件,并重新设定高度才能解决这个问题。

10.禁止ios和android用户选中文字

-webkit-user-select:none

js:

    B、:active 效果不兼容

    在android 4.0版本以下CSS :active伪状态效果无法兼容,我们给该元素的touch系列的事件(touchstart/touchend/touchmove)绑定一个空匿名方法:

var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false);

时间: 2019-08-30阅读: 529标签: 微信问题:

    A、浏览器崩溃

var act = function(){
 window.removeEventListener('devicemotion',act);
};
window.addEventListener('devicemotion',act,false);

    解绑函数写在了事件处理中导致小米手机中的微信崩溃,那么我们不要将解绑时间写在事件处理中即可。

input type="tel" onblur="iptblur()"/

    D、不支持局部滚动

    在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效,这里有两种解决方案:

    1、巧用布局直接设置样式滚动条在body(html)上,其他元素“错觉滚动”。

网上澳门金莎娱乐,    2、利用iscroll、自写js控制translate、scrollTop模拟

19 往返缓存问题

点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 :window.onunload = function(){};

    A、事件无法被触发

    在部分android机型的微信环境中会出现事件无法触发、表单无法输入的情况,我们针对需要输入或者触发事件的元素设置样式:-webkit-transform: translate3d(0,0,0) ,不过新版本的微信已经直接修复了该问题。

4. h5底部输入框被键盘遮挡问题

h5页面有个很蛋疼的问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决

网上澳门金莎娱乐 1

var oHeight = $(document).height(); //浏览器当前的高度

   $(window).resize(function(){

        if($(document).height() < oHeight){

        $("#footer").css("position","static");
    }else{

        $("#footer").css("position","absolute");
    }

   });

  关于Web移动端Fixed布局的解决方案,这篇文章也不错

http://efe.baidu.com/blog/mobile-fixed-layout/

网上澳门金莎娱乐 2

3、应用

21 iOS6下伪类:hover

除了<a>之外的元素无效;在Android下则有效。类似

div#topFloatBar_l:hover #topFloatBar_menu { display:block; }

这样的导航显示在iOS6点击没有点击效果,只能通过增加点击侦听器给元素增减class来控制子元素。

    D、Flex box 不兼容

    在游戏内嵌webview中碰到Flex box布局不兼容的情况,图中所示下面部分的导航错位了,虽然之前有仔细查看过Flex box的兼容性,但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容,所以导致错误,所以我们写完整历史版本呢的3种Flex box 解决。那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少不不要的麻烦。

8.消除 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

22 在移动端修改难看的点击的高亮效果,iOS和安卓下都有效:

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

不过这个方法在现在的安卓浏览器下,只能去掉那个橙色的背景色,点击产生的高亮边框还是没有去掉,有待解决!

一个CSS3的属性,加上后,所关联的元素的事件监听都会失效,等于让元素变得“看得见,点不着”。IE到11才开始支持,其他浏览器的当前版本基本都支持。详细介绍见这里:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;

13.android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

    B、预加载、自动播放无效

    如上表所示,经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器(webview)、版本等的影响,苹果官方规定必须由用户手动触发才会载入音频,那么我们捕捉一次用户输入后,让音频加载实现预加载:

//play and pause it once

document.addEventListener('touchstart', function () {

 document.getElementsByTagName('audio')[0].play();

 document.getElementsByTagName('audio')[0].pause();

});

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:微信h5 input输入框软键盘关闭后,页面无法回到正常位置

关键词: