<input placeholder="验证码" type="tel" v-model="verify" maxlength="4" @input="change()" @focus="focusIn" @blur="blurIn" />

focusIn() {

  // ios键盘弹出底部留白问题

  const body = document.querySelector('.phone-bind') // input所在的容器

  body.scrollTop = body.scrollHeight

},
blurIn() {

   // ios键盘弹出底部留白问题

   window.scroll(0, 0)
},

h5页面ios键盘弹出收起后页面底部留白问题的更多相关文章

  1. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

  2. 小米note3，华为手机，软键盘弹出之后，页面上定位的元素布局会乱掉

    原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...

  3. iOS 键盘弹出遮挡输入框

    #pragma mark 键盘弹出遮挡输入框 //开始编辑输入框的时候,软键盘出现,执行此事件 -(void)textFieldDidBeginEditing:(UITextField *)textF ...

  4. H5 App页面 绝对定位 软键盘弹出时顶起底部按钮

    做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...

  5. iOS:键盘弹出和收起的通知使用

    介绍:不论是UITextField,还是UITextView,使用它们输入文字时都是有键盘的弹出,此时可能会挡住我们创建的一分部其他视图,此时,就需要根据键盘的高度将我们被隐藏的部分View做向上或者 ...

  6. IOS键盘弹出、隐藏

    IOS键盘 UIKeyboardFrameBeginUserInfoKey:动画开始前键盘的size UIKeyboardFrameEndUserInfoKey:动画结束后键盘的size - (voi ...

  7. IOS 键盘弹出导致的position:fixed 无效问题

    解决办法(还未测试): 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件.可拷 ...

  8. 处理安卓和ios当页面原生键盘弹出，输入框不显示

    $('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function() ...

  9. 处理ios键盘弹出按钮点击click失效

    用ontouchstart绑定事件即可,然后用 document.activeElement.blur();让键盘收起 this.value = value.replace(/\s/g, " ...

随机推荐

  1. typedef interrupt void (*PINT)(void)的分析

    今天写程序时,在DSP2833x_PieVect.h看到typedef interrupt void (*PINT)(void)突然一愣,上网查了下发现在这是加了interrupt 中断关键字的函数指 ...

  2. 【Deep Learning Nanodegree Foundation笔记】第 5 课：Logistic Regression

    Learn about linear regression and logistic regression models. These simple machine learning models a ...

  3. Markdown基础语法总结

    目录 区块元素 标题 列表 区块引用 代码区块 分隔线 段落和换行 区段元素 链接 强调 代码 图片 转义 标题 <a name="title"></a> ...

  4. 4、android studio打包的时候遇到的问题

    那就去掉该签名 但是如果使用generated apk的话,则是不会去调用build.gradle文件的,需要使用gradle命令来打包 https://blog.csdn.net/cencibuqi ...

  5. 声明一个LIst类型的数组

    ArrayList[] graphArrayList = new ArrayList[4]; for(int i=0;i<graphArrayList.length;i++){ graphArr ...

  6. webpack入门学习手记（一）

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  7. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  8. Yii中实例化类的四种方式

    1.最简单的也是最基本的,大家都会的一种 use yii\caching\FileCache; $cache = new FileCache(); $cache->set("name& ...

  9. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  10. Linux 硬盘挂载（服务器重启自动挂载）

    1.先查看目前机器上有几块硬盘,及已挂载磁盘: fdisk -l 能够查看到当前主机上已连接上的磁盘,以及已经分割的磁盘分区.(下面以/dev/vdb磁盘进行分区.挂载为例,挂载点设置为/data) ...