input(移动端iOS)输入内容时调用软件盘后页面底部留白问题

iOS/input输入框调用软键盘底部留白

只需input输入框失去焦点时,让页面自动下移即可恢复

<input placeholder="请输入用户名" v-model="form.account" @blur.native.capture="blurchange"></input>
    blurchange () {
      let currentPosition = ‘‘
      let timer = ‘‘
      let speed = 1 // 页面滚动距离
      timer = setInterval(function () {
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop
        currentPosition -= speed
        window.scrollTo(0, currentPosition) // 页面向上滚动
        currentPosition += speed // speed变量
        window.scrollTo(0, currentPosition) // 页面向下滚动
        clearInterval(timer)
      }, 1)
    }

在该代码基础上增加了一些简单逻辑,判断是否为ios系统和是否为微信6.7.4版本。

代码:

var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
var wechatVersion = wechatInfo[1]
var u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(wechatVersion==‘6.7.4‘&&!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
...代码逻辑
}

原文链接:https://blog.csdn.net/weixin_42992083/article/details/85236214?id=1

参考链接:https://juejin.im/post/5c07442f51882528c4469769

原文地址:https://www.cnblogs.com/karila/p/11737243.html

时间: 2024-10-09 13:14:51

input(移动端iOS)输入内容时调用软件盘后页面底部留白问题的相关文章

“网站内容可以显示但在页面底部提示错误”的解决方法

“网站内容可以显示但在页面底部提示错误”的解决方法 今天阿D遇到一个问题,客户网站内容可以正常访问,但是网站尾部都出现数据库等一大推错误提示,如下图 起初以为是网站权限问题,设置好权限,还是提示这个错误,然后又去纠结数据库文件和数据库配置文件是否修改好,都检查无误,依旧提示这个错误,最后根据那个warning的路径,发现tplcache 下好多缓存文件,然后把这些在这个目录下新建个目录,把所有缓存文件拖进新建的那个目录,再次访问,就正常了 总结:网站可以正常打开,多了一堆后缀,首先要去看错误提示

移动端H5 input输入完成后页面底部留白问题

背景: H5页面在微信上展示,不管是在弹窗上的或者页面在偏底部位置的input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 出现原因分析 当键盘抬起时,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为点击之前的页面的高度(一般window.scrollTo(0,1000000)是可以解决大多数情况) 解决方案1: 核心代码: let currentY = 0; focus(){ currentY = 

[iOS]UITextView在输入内容时光标不在最下方的解决方案

使用UITextView的时候经常出现光标不在最下方的情况...(iPhone6+iOS8) 解决方法: 首先去除所有的Padding: _textView.textContainerInset = UIEdgeInsetsZero; _textView.textContainer.lineFragmentPadding = 0; 然后在委托方法里加上一行: -(void)textViewDidChange:(UITextView *)textView { // 各种业务 ... [self.t

ios输入内容正则表达式的应用

原文链接:http://www.haogongju.net/art/1595705 由于最近开发ios的程序,由于需要正则表达式的验证,比较麻烦. 正则表达式的用法比较多,可以网上搜索一下,但是使用的过程中会根据问题区分. 目前的需求就是,输入的内容不可以是汉字,也不可以有空格,代码如下,判断汉字主要是根据字符所占用的字节数判断. BOOL hasChinese = NO; int length = [str length]; for (int i=0; i NSRange range = NS

初探JS-html5移动端发送指定内容短信到指定号码

原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于输入发送的号码.再加一个a标签. 代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>发送短信</t

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

项目中遇到了这个问题,说实话 iOS 端问题挺多的,原因找起来比较简单,就是吊起键盘的时候把window的高度挤小了,然后, 关掉键盘页面高度没恢复,安卓手机会自动恢复页面高度. 原因找到了就想解决办法,刚开始想的是 iOS 它不恢复那我也没办法,这属于 iOS 的bug啊或者微信的 bug 啊,但领导不这么想, 页面显示出问题了当然得解决,就在google里翻,也是找到解决方法了,如下链接 微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案 解决方法很简单,让window滚动下就可以

Android之输入内容监听回车键【Editor】

2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "onEditorAction

文本框输入内容立即触发事件

1.当输入内容时,立即触发某事件,宜用onkeyup,onchange会有延时. 2.jsp页面中常用的触发方法有: onchange .onkeyup .onblur 3.js中一般去掉on,例如 //自动检索 $("#resetSearch").keyup(function(){ var name = $("#resetSearch").val(); $("#projectListPanel").load(url,function(){ re

即时搜索:对于ios自带输入法输入中文时多次触发input事件的处理

实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由于搜索的关键字不得法,没有即时找到合适的方案,后来终于在网上找到了解决方案,现记录如下: 代码实现 /** * @param flag: 用于标记是否是非直接的文字输入 */ var flag = false; $('#id').on({ 'compositionstart': function()