h5 ios微信浏览器 input获取焦点后，收起软键盘，光标错位

整个页面布局如下:

外层设置fixed的原因是不让页面在浏览器中进行上下拖拽,

最后形成的结果是：输入框获取焦点输入内容后，光标错位，导致不能选中输入框重新获取焦点（页面上移，但是布局未产生影响）;

解决

改变页面布局:

外层fixed取消,改用 display:flex布局，将内容分为3部分，中间内容flex-grow: 1; 好了

给input设置fixed或者input的父元素设置fixed 导致此原因

原文地址：https://www.cnblogs.com/bigsister/p/10824655.html

时间： 2024-10-09 23:31:02

h5 ios微信浏览器 input获取焦点后，收起软键盘，光标错位的相关文章

移动端输入框获取焦点后，虚拟键盘弹起，把固定的底部也顶起来了

var homeFootBar = document.querySelector("底部foot")var shortcutVal = document.querySelector("input")shortcutVal.addEventListener("focus", function (e) { if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ focusInput()

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

[Debug]IOS微信浏览器不支持form表单的target=_blank

测试代码如下 1 <?php 2 echo '<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">'; 3 if(!empty($_POST)){ 4 echo "<pre>"; 5 print_r($_POST); 6 exit; 7 } 8 if(!empty

关于H5在微信浏览器内自动转格式，导致不能正常打开的问题

从最近开始,微信朋友圈打开我们的H5页面有时会出现了“此网页已被QQ浏览器重新排版”的提示,直接结果就是导致H5网页或H5小游戏不能正常显示了!!这个问题什么严重,不知道腾讯又是怎么考虑的,难道真的是为了去广告,让用户获得良好的阅读体验吗? 有没有解决方案呢?是有的! 而且非常简单~ 解决方案: 1.找一个认证的公众号,随便找一个就行,只要是认证的,自己的还是别人的都无所谓 2.在“公众号设置”-“功能设置”-“业务域名”中添加自己H5网页的域名就可以了! 3.添加后,测试分享H5到朋友圈,结果

苹果 ios 微信浏览器界面 ajax 提交带 file 的 form 总是走error方法

1. 问题 问题出在微信端,而且是苹果机的微信端(苹果你咋这么矫情,安卓正常).:代码还是之前的代码,貌似是苹果升级系统后部分版本出现的 BUG,后来证明确实跟 ios 版本有关,网上也找过类似的解决措施: 2. 解决方法 2.1 添加 async: false(未验证) function saveUser() { $.ajax({ type:"POST", url:"SaveUser.action", data:$('#fm').serialize(), data

ios微信浏览器click事件不起作用的解决方法

$(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,html代码是动态追加进去的,click事件在苹果手机没作用,在安卓和pc端事件完全正常 经过一番搜索,解决方法也很奇葩,只需在html代码中添加onclick=""   就可以了,记录下来 ,让后面看到的人少走弯路 如:<div class="weui_cell"

判断是否微信浏览器，获取cookie，获取URL来源等

function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } jQuery(function () { jQuery("strong").bind("taphold", tapholdHandle

ios safari input fixed 软键盘里的爱恨情仇

请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.1.0.js"></script> <style&g

HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信

准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器. 录音代码 本示例代码支持PC.Android.IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器.小程序)的支持. 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试. <!-- 先加载js录音库,注意:你应该把js clone到本地使用 -