IOS微信点击input弹出输入法,关闭后页面留白解决方案

  场景:IOS用微信点击input框弹出输入法后

     

    不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局

               

    

  解决方法:

      给input添加blur(失去焦点)事件,让页面强制回滚,距离为0,代码如下  

$("input").blur(function(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
});

        原文出处:https://blog.csdn.net/KenThomas/article/details/86691404

  

  补充:

    最开始找到的方法并不是上面那个,而是下面这个看似比较复杂的代码,虽然也能够解决问题

var u = navigator.userAgent, app = navigator.appVersion;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    $(document).ready(function(){
        $("input").blur(function(){
            if (isIOS) {
                blurAdjust()
                // alert("1231321233")
            }
        });
    });
    // 解决苹果不回弹页面
    function blurAdjust(e){
        setTimeout(()=>{
            // alert("1231321233")
            if(document.activeElement.tagName == ‘INPUT‘ || document.activeElement.tagName == ‘TEXTAREA‘){
                return
            }
            let result = ‘pc‘;
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                    result = ‘ios‘
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                    result = ‘android‘
            }

            if( result = ‘ios‘ ){
                document.activeElement.scrollIntoViewIfNeeded(true);
            }
        },100)
    }

      原文出处:https://blog.csdn.net/m0_37520980/article/details/86305488

 

  注:虽然上面2种方法都能解决问题,但从代码的冗杂度来看,显然第一种更好,代码量更少,也更容易理解。

    所以小伙伴们在查找问题解决方法时,建议抱着还有更简单的方法的心理多试着找一找

     

    

原文地址:https://www.cnblogs.com/tu-0718/p/10561360.html

时间: 2024-10-18 01:51:18

IOS微信点击input弹出输入法,关闭后页面留白解决方案的相关文章

iOS开发——点击UITextField弹出UIDatePicker的协议实现方法

UITextField是用来接受用户输入的控件,它的优点是灵活性大,用户可以随便输入,但有时候这也是其缺点.对我们而言,典型的一个问题就是格式检查.然而我们也会遇到想让用户输入日期的时候,这个时候再进行格式检查就有些小题大做了,毕竟iOS已经为我们提供了一个UIDatePicker来进行日期选择,这样一个很自然的想法就是当用户点击UITextField的时候弹出的不是键盘,而是我们的UIDatePicker. 一个简单地方法是将自己的UIDatePicker直接赋给UITextField的inp

Layer弹出层关闭后刷新父页面

API地址:http://layer.layui.com/api.html#end 调用END回调方法: end - 层销毁后触发的回调 类型:Function,默认:null 无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数. function updateStock(id) { //iframe层 parent.layer.open({ type: 2, title: '修改', shadeClose: false, //点击遮罩关闭 shade: 0.8, area: [

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

【转】swift实现ios类似微信输入框跟随键盘弹出的效果

swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实现的呢,也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了?但是我使用这种方法的时候,发现效果十分不理想,会有明显的滞后现象,原因有以下几点: 键盘弹出动画并不是匀速,键盘和输入框的时间曲线不完全一致,运动不同步 各种键盘的高度不一样(比如

手机调用系统的拍照和裁剪功能,如果界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。

code如下: //Longest common sequence, dynamic programming method void FindLCS(char *str1, char *str2) { if(str1 == NULL || str2 == NULL) return; int length1 = strlen(str1)+1; int length2 = strlen(str2)+1; int **csLength,**direction;//two arrays to recor

Android封装类似微信的顶部TitleBar弹出的PopupWindow代码

Android仿微信顶部titlebar,点击加号弹出的PopupWindow,是封装好的PopupWindow,直接拿来用即可,先看效果图:  调用代码非常简单,这是MainActivity的代码: public class MainActivity extends AppCompatActivity { private TitlePopup titlePopup; @Override protected void onCreate(Bundle savedInstanceState) { s

点击删除弹出提示是否删除代码

点击删除弹出提示是否删除代码:在一些应用中,会有删除功能,比如删除新闻等功能,在这些功能中,当点击删除的时候,一般会弹出提示窗口,提示是否要删除指定的内容,以防止出现误操作现象,下面就通过代码实例介绍一下,如何弹出这个提示窗口.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

关于AlertDialog.getWindow().setContentView(view)不能弹出输入法

可以阅读官方文档:http://developer.android.com/reference/android/app/Dialog.html 其中有一段: Note: Activities provide a facility to manage the creation, saving and restoring of dialogs. See onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), anddis

Android中EditTex焦点设置和弹不弹出输入法的问题

今天编程碰到了一个问题:有一款平板,打开一个有EditText的Activity会默认弹出输入法.为了解决这个问题就深入研究了下android中焦点Focus和弹出输入法的问题.在网上看了些例子都不够全面,在这里全面总结下. 一:EditText为什么会默认弹出输入法? 同样的代码,碰到有EditText控件的界面时有的机子会弹出输入法,有的机子不会弹出.不好意思,这问题我也一头雾水,谁知道可以告诉我,否则我就把这个问题留下来,以后研究android源码时再搞个清楚.但是...我有解决方案. 二