关于IOS input、textarea position:fixed 在focus时软键盘弹起错位bug的解决方案

最新推荐文章于 2021-06-03 15:46:29 发布
最新推荐文章于 2021-06-03 15:46:29 发布
阅读量509 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/parker/blog/756701
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <script>
    (function(g,h){function f(){var a;a=b.getBoundingClientRect().width;540<a/c&&(a=540*c);b.style.fontSize=a/10+"px";g._rem=a/10}var b,a,c,d,e,k;b=document.documentElement;a=h.getElementById("view");k=window.navigator.userAgent;a||(a=h.createElement("meta"));c=window.devicePixelRatio;d=parseFloat(1/c).toFixed(2);k.match("iPhone")?(a.setAttribute("name","viewport"),a.setAttribute("content","width=device-width,initial-scale="+d+", maximum-scale="+d+", minimum-scale="+d+", user-scalable=no"),b.setAttribute("dpi",c)):(a.setAttribute("name","viewport"),a.setAttribute("content","width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"),b.setAttribute("dpi",1));b.firstChild.appendChild(a);g.addEventListener("pageshow",function(){clearTimeout(e);e=setTimeout(function(){f()},300)},!1);g.addEventListener("resize",function(){clearTimeout(e);e=setTimeout(function(){f()},300)},!1);f()})(window,document);
    </script>
    <title>ios position:fixed bug</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            font-family: monospace;
        }

        textarea {
            height: 220px;
            font-size: 16px;
            line-height: 40px;
            margin: 0;
            background: rgba(0,255,0,1);
            display: block;
            width: 100%;
            color: #fff;
            font-weight: bold;
            padding: 2px 10px;
            z-index: 1;
            position: fixed;
            top: 0;
        }
        body,html {
            height: 100%;
            overflow: hidden;
        }
        #body {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
    <div id="body">
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
        <p> Biltong drumstick chuck, turkey flank shoulder bacon spare ribs short ribs sirloin </p>
    </div>
    <textarea id="scroll" placeholder="tap to focus" ></textarea>
</body>
</html>

参考链接：

https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

转载于:https://my.oschina.net/parker/blog/756701

weixin_34378969
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery给input和textarea设定ie中的focus
12-11
例如，本文提到的问题是关于在Internet Explorer (IE) 浏览器中为`input`和`textarea`元素设置焦点（focus）效果。在Firefox和其他现代浏览器中，可以简单地通过CSS伪类`:focus`来实现这一效果，如`input:focus`和`...
微信小程序 textarea 简易解决方案
03-29
微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。 虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入...
IOS7 position:fixed focus定位问题
luoqinglong的专栏
04-03 177
在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变。参见该页面详细描述（http://www.cnblogs.com/zhangdaiping/p /3170892.html） 后期BETA3修复了该问题，但是在微信下 页面还是会出现一样的问题。后查找 可以修改viewport//修改viewport标签 &lt;meta name=...
移动端软键盘监听（弹出，收起），及影响定位布局的问题
weixin_30339457的博客
09-13 642
移动端软键盘监听（弹出，收起），及影响定位布局的问题 一：移动端软键盘监听（弹出，收起） 　　参考：链接一　　　链接二　　　　　　　　 1.监听resize ( Android） var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function () { var thisHei...
修复ios textarea输入框不灵敏bug
风烟
07-24 805
查了网上的解决办法，有两种 第一种：fastclick引起的焦点聚焦冲突 第二种：设置user-select: auto 但是使用这两种方法发现都不起作用，最后想到，既然和fastclick事件冲突了，但是click事件他肯定会触发，所以就直接在click事件里面直接强制focus就可以了。 focus(e) { e.target.focus(); } ...
html文本框光标错位,IOS中position:fixed导致的input、textarea光标错位
weixin_39672979的博客
06-03 480
形成原因：input输入的时候，输入法键盘弹出的时候会把页面上推，input失去焦点时，键盘消失，页面恢复正常。但是position:fixed的时候，页面恢复但是“输入区域”却没有恢复，所以导致点击错位。其实可以设置成position:absolute，就会发现键盘消失后页面并没有恢复原位。解决办法就是给input添加blur事件，失去焦点的时候页面滑到顶端，具体代码如下：$("input,te...
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
解决ios手机中input输入框光标过长的问题
08-27
"解决ios手机中input输入框光标过长的问题" 在移动端页面开发中，input输入框的光标大小问题是一个常见的问题，特别是在iOS手机中，光标大小与安卓手机不一致的问题。今天，我们将讨论如何解决ios手机中input输入框...
android7.0图标反馈,android7.0 webview中 图标错位
weixin_39925350的博客
05-29 104
@font-face {font-family: 'iconfont';src: url('../img/icons/iconfont.eot');/* IE9*/src: url('../img/icons/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('../img/icons/iconfont.woff'...
iostextarea获取焦点_jquery – 在iOS上的Safari中针对textarea触发的不一致事件
weixin_33987275的博客
12-23 379
我遇到了Safari for iPad上的一个令人愤怒的错误,我无法修复.建筑：>骨干0.9.9> jquery 1.7.2> jquery mobile 1.3.1用户代理：> iOS 5.1.1(iPad)> Safari 5.1手机>完整的用户代理字符串：Mozilla / 5.0(iPad; CUP OS 5_1_1,如Mac OS X)AppleWeb...
iostextarea获取焦点_关于IOS input、textarea position:fixed 在focus时软键盘弹起错位bug的解决方案...
weixin_39581099的博客
12-23 242
(function(g,h){function f(){var a;a=b.getBoundingClientRect().width;540ios position:fixed bug* {box-sizing: border-box;margin: 0;font-family: monospace;}textarea {height: 220px;font-size: 16px;line-he...
vue爬坑记录：ios系统下，触摸input框以及textarea框无法唤起输入法
Mirage
05-03 3196
第一次触摸基本可以正常弹出输入框，然而第二次往后，就非常不好使。 这是ios升级11.3以后fastclick的问题，解决方案： 当前fastclick版本：1.0.6 找到fastclick.js源码，316行，加入如下一行代码： ...
移动端开发，IOS、iPhone，表单input元素获取焦点时页面被放大的解决办法。
好好做前端
04-25 8464
真心觉得移动端开发坑好多，不过解决问题也有不少乐趣，也能总结很多经验方法，都是之前遇到的，想记录下来方便翻阅。 在IOS测试的时候，每次input获取焦点都会使页面放大，真是要多丑有多丑，经多方求助终于得到这个美丽的方法解决一下，之前总是在head中写超多的meta标签，但有一些都没去追寻他们是啥意思。这个问题就是吃了这个亏。 content="width=device-wi
小程序 textarea 在ios 上错位
不二喵老师
03-05 1030
在真机上会飞到箭头指的那个地方 用positon:static!important；不好使 方案1： 把textarea 换成input 自动被passs了 因为他们不会同意的 方案2： 利用视觉感觉 把text area 换掉 wxml: <view class="textAreaBox"> <!-- &lt...
input, textarea:focus, select:focus { outline: none; }
最新发布
05-12
这段 CSS 代码的作用是消除 input、textarea 和 select 元素在被选中时的默认外边框样式，使其没有边框或者边框为 none。这样做可以使页面看起来更加美观和统一，也可以提高用户体验。不过，需要注意的是，消除默认...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值