解决ios h5 input输入框被输入法弹出一块区域的问题

问题:如下图

解决方案 scrollIntoView

scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐

/**
 *
 * 使用方法 输入框中 onclick="sr(this);" onblur="nosr(this)"
 */
var timer1;
function sr(obj) {
	timer1 = setInterval(function() {
		obj.scrollIntoView(false);
	}, 100);

}
function nosr(obj) {
	clearInterval(timer1);
}

以上这篇解决ios h5 input输入框被输入法弹出一块区域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • h5 ios输入框和键盘的兼容性优化指南

    起因 h5的输入框引起键盘导致体验不好,目前就算微信.知乎.百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了.目前在准备一套与native协议 来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下 下面话不多说了,来一起看看详细的介绍吧 业务场景 固定在h5页面底部的输入框 无论是使用 <input /> 还是 <div contenteditable="true"> &l

  • 解决Android软键盘弹出覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

  • 解决vue js IOS H5focus无法自动弹出键盘的问题

    IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法 代码如下,有问题欢迎评论 <template> <div class="pwdpush-box"> <h4 class="enter-pass

  • 解决ios h5 input输入框被输入法弹出一块区域的问题

    问题:如下图 解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法 输入框中 onclick="sr(this);" onblur="nosr(this)" */ var timer1; function sr(obj) { timer1 =

  • Android输入法弹出时覆盖输入框问题的解决方法

    当一个activity中含有输入框时,我们点击输入框,会弹出输入法界面,整个界面的变化效果与manifest中对应设置的android:windowSoftInputMode属性有关,一般可以设置的值如下, <activity android:windowSoftInputMode=[ "stateUnspecified", "stateUnchanged", "stateHidden", "stateAlwaysHidden&q

  • 完美解决手机网页中输入框被输入法遮挡的问题

    之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 css部分 (dlg-top与dlg-bottom为对话框的类,用于确定对话框的定位方式) .dlg-top{ position: fixed; top:100px; left:10%; } .dlg-bottom{ position: fixed; bottom:0px; left:10%; }

  • Android实现输入法弹出时把布局顶上去和登录按钮顶上去的解决方法

    背景:在写登录界面时,老板就觉得在输入密码的时候谈出来的输入法软键盘把登录按钮遮挡住了(入下图所示,不爽),连输入框都被挡了一半,于是不满意了,要叫我改,于是我看QQ的登录效果,我就去研究了一下,弹出输入法整个布局上来了,终于让老板满意了. (如上图这样,老板不满意的,呵呵) 1,咱们就解决问题吧. 我看了很多博客和问答,很多人都说直接在在AndroidManifest.xml中给这个Activity设置 <activity android:windowSoftInputMode="sta

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • 解决ajax返回验证的时候总是弹出error错误的方法

    发一个简单案例: 前台: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户登录</title>

  • iOS 10拨打系统电话弹出框延迟出现问题的解决

    前言 最近在开发中遇到了一些问题,发现iOS 10拨打系统电话发现弹出框会延迟2s左右出现,很不爽,研究了一下,发现是openURL在iOS 10及其之后会阻塞主线程 所以,拨打电话前,做个判断,下面话不多说了,来一起看看详细的介绍吧. 示例代码: // 拨打电话 + (void)callPhone:(NSString *)phoneNum { if ([ISNULL(phoneNum) length] == 0) { [SVProgressHUD showErrorWithStatus:@"拨

  • 漂亮的jquery提示效果(仿腾讯弹出层)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Emula

  • jQuery实现的自定义弹出层效果实例详解

    本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

随机推荐