移动端输入框 input 被弹出来的键盘挡住

【移动端输入框 input 被弹出来的键盘挡住】的更多相关文章

移动端输入框 input 被弹出来的键盘挡住

给被挡住的input或者textarea加一个id,然后在click事件里调用下面的代码 document.querySelector('#xxx').scrollIntoView();…

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 移动端input被键盘遮挡,事件是跳到可视区域! document.querySelector('#inputId').scrollIntoView(); //只要在input的点击事件,或者获取焦点的事件还有一个事件是指定在上方或下方 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/s…

【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件

问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" /> js: setTimeout(()=>{ this.$r…

ios下input focus弹出软键盘造成fixed元素位置移位

正常状态下 input focus软键盘弹出时问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3已修复),当软键盘关闭时,头部结构位置又恢复正常安卓手机下,fixed表现要比ios好,不会出现此问题然而在移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行,所以寻找css的方法(且js方法比较消耗性能) 各类大网站的解决方法:一般是页面上避免悬挂元素,或者有悬挂元素时,避免产生软键…

移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:…

移动端H5页面 input 获取焦点时，虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用window.scrollTo() <input type="text" onfocus="inputFocus()"/> <script> function inputFocus(){ setTimeout(function(){ window.…

input 输入框光标错位问题、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题

在IOS系统下的问题: 搜索出的建议如下: 你应该是用fixed定位做的弹出框,弹出框里面有文本框.fixed在ios上兼容不友好,会造成光标乱跳.建议用better-scroll,或者用absolute定位改写弹出框. ios 10以上 fix布局会产生如下bug -- 光标溢出问题可能是Fixed布局使用的人少吧!很多人都没遇到这个坑,所以更应该推出这篇文章最后更换定位方式,完美解决此BUG. .survey-phone-box { position: absolute; top: ;…

移动端，input输入获得焦点被键盘遮住简单解决方案

(function (window,document) { document.querySelector('input[type="text"]').addEventListener('focus',function (e) { setTimeout(function () { var docHeight = window.innerHeight; var bottom = e.target.getBoundingClientRect().bottom var scrollHeight…

开发移动端web应用, 使用手机自带键盘的搜索按钮

很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索虽然不是什么大的功能, 但是确实很实用, 实现的效果有一下两点 1. 点击input元素, 弹出的键盘右下角显示为 "搜索" 二字 2. 点击搜索时, 可以出发页面中的js事件代码如下 <!doctype html> <html lang="en"> <head…

点击底部input输入框，弹出的软键盘挡住input（苹果手机使用第三方输入法）

测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤起软键盘时,软键盘挡住输入框.如图所示: 点击input键盘挡住图.png 测试过多台真机发现安卓的手机都不会出现这个问题,个别的iOS手机有问题.而且同一型号的苹果有的有问题有的没有问题.经过多方的归纳.总结惊奇的发现:会出现这个bug的苹果手机,使用的都是苹果第三方输入法,而使用苹果自带的输…

禁止移动端input弹出软键盘

在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> <input type="text" id="disable1" class="" placeholder=""/> </div> <div> <input type="tex…

iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有一个input 输入框. 点击 input 框使之获取焦点,唤起虚拟键盘,正常页面效果如下: 注:在ios系统唤起软键盘,键盘和底部输入框之间有一块空白间…

iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有一个input 输入框. 点击 input 框使之获取焦点,唤起虚拟键盘,正常页面效果如下: 注:在ios系统唤起软键盘,键盘和底部输入框之间有一块空白间…

解决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…

div模拟输入框input/textarea

//html <div class="info-wrap"> <form class="formToCheck" id="formToCheck" method="get" action="#"> <div class="info-box"> <div contenteditable="true&quo…

移动端和PC端页面常用的弹出层

我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端我们需在页面引入弹出框的样式和js <link href="__STATIC__/weui.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src=&…

制作输入框(Input)

怎样判断是否应当使用输入框输入框,就是用户可以自由输入文本的地方.当需要判断是否需要使用输入框时,可以遵循一条原则:凡是需要用户自主输入文本的地方,几乎都必须使用输入框. 输入框的常见用法:输入登录账号和密码.输入角色名称.输入聊天内容等. 创建输入框输入框的3个核心控件:BoxCollider组件允许UI能输入事件.UIInput组件允许玩家能输入自己的文字.一个UILabel来显示输入的文字. 第一种创建方式:自己拼装 (1)创建一个Sprite作为输入框的底板. (2)为这个输入框的底…

输入框 input只能输入正数和小数点

输入框 input只能输入正数和小数点限制文本框只能输入正数,负数,小数 onkeyup="value=value.replace(/[^\-?\d.]/g,'')" 限制文本框只能输入正数,小数 onkeyup="value=value.replace(/[^\d.]/g,'')" <input type="text" id="startje" onkeyup="value=value.replace(/…

[Phonegap+Sencha Touch] 移动开发24 包wp8.1的App，弹出软键盘输入框聚焦实施后，无移动采收率方法来解决接口

这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序,打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移.例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位.例如以下图: 我的一些研究结果…

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App，执行时输入框聚焦弹出软键盘之后，界面上移而不恢复原位的解决的方法

这个现象仅仅出如今phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其他js框架我測试了几个(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序.打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移,例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位,例如以下图: 我的一些研究结果:…

AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题

1. AppCompatActivity去掉标题栏此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料得知,其实它貌似没有标题栏,上面显示的标题栏是一个ActionBar控件(PS:即标题栏部分是一个控件,该控件功能还比较强大),因此AppCompactActivity可以对该控件添加相关返回.许多等类似功能按钮,如果不添加这些按钮看起来就像是一个标题栏. 所以,在网上许多去配置value文件夹中的…

palacehoder的自定义样式【输入框input /文本域textarea】

7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea). ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; } ::-moz-placeho…

手机端input获取焦点弹出键盘时挡住input解决方案

问题重现原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有一个input 输入框. 点击 input 框使之获取焦点,唤起虚拟键盘,正常页面效果如下: 注:在ios系统唤起软键盘,键盘和底部输入框之间有一块空白间距. 但是偶尔会出现软键盘挡住input框的情况,如下: 针对此问题,目前没有十分有效的方法,只能通过js调整input输入框的位置,使之出现在正…

点击input触发弹出框的bug

先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了input2的click事件,所以就会冲突. 我想先unbind前面的click,再bind一次click,但是不好使,现在唯一的解决办法是,第一次建立弹出框时,先读取数据,同时建立一个hidden input,把数据先存进input里,关闭弹出框的时候删除弹出框,第二次弹出框,再次建立弹出框,然后直接…