web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决

【问题】移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea、HTML5中contenteditable等),同时存在的时候;
两位大侠瞬间发生剧烈的化学反应,出现各种奇葩问题,见下图:

【结论】输入框position属性值不是fixed,而变成了absolute

【出现情况】当我们唤起键盘的时候,输入框位置不再页面最下面,或者说页面当时还可以继续往下滚动,再或者页面没有滚动到最下边,这个时候就会出现上面的问题

【学习失败,在失败中成长】,接下来我们开始,开启战斗模式:

【解决思路】既然在ios下由于软键盘出现后,页面fixed属性会失效,导致跟随页面一起滚动,那么假如页面不会过长出现滚动,那么即便fixed属性失效,也无法跟随页面滚动,问题也就不复存在

如图页面分成两个部分,上部分内容部分,下部分输入框部分;两部分都使用fixed属性,使得页面无法进行滚动,正好符合我们上面的思考,上面内容部分使用overflow:auto;直接支持在其内部进行滚动;

到此,由fixed和input的爱恨情仇,应被解决,上面遇到的问题也不再出现,但相应的也产生了其它问题

【新问题1】上边内容部分滚动非常不流畅,滑动的手指松开后,滚动立即停止,失去了原本的流畅滚动特性(可以自己搜关于【弹性滚动】方面的资料进行了解)

【解决办法】使用-webkit-overflow-scrolling: touch;属性解决问题,页面滚动恢复流畅

【新问题2】在页面滚动到上下边缘的时候,如果继续拖拽会将整个页面一起拖拽走,导致页面的"露底"的现象,如下图:

同时,当我们进行内容滚动的时候,有时会滑动下部分,导致内容滚动停止,给用户的体验极其不舒服

【解决办法】设置页面overflow:hidden;(也就是body标签),问题到此,得到完美解决

【注!注!注!】下面总结一下其它一些细节问题

1. overflow:scroll/auto;本身带有的兼容性,如:一些Android系统不支持此属性,所以需要我们使用isScroll.js第三方插件,实现页面内部滚动

2. 在ios下使用第三方输入法时,输入法被唤醒的时候,会出现输入框被遮盖住,这个暂时没有找到解决答案,先挖个坑,埋起来

时间: 2024-10-06 14:14:13

web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决的相关文章

【转载】Web移动端Fixed布局的解决方案

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子

[转] Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <

Web移动端Fixed布局的解决方案

转载于EFE博客,这是一篇非常有价值的文章,做移动端基本跑不了会遇到这篇文章提到的问题. 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码)

Web移动端Fixed布局的解决方案(原文出处:http://efe.baidu.com/blog/mobile-fixed-layout)

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <

Flexbox 布局的最简单表单

作者 | 阮一峰 来源 | http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html   弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程,才意识到一个最简单的表单,就可以解释 Flexbox,而且内容还很实用. 下面,你只需要10分钟,就可以学会简单的表单布局. 一.<form> 元素 表单使用<

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

input from 表单提交 使用 属性 disabled=&amp;quot;disabled&amp;quot; 后台接收不到name=&amp;quot;username&amp;quot;的值

input from 表单提交 使用 属性 disabled="disabled" 后台接收不到name="username"的值

虚拟键盘冲击移动端fixed布局的解决方案

在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug. 问题描述: 开发一个创业板转签页面,预期效果图是这样的. 红色矩形区域为使用fixed布局的内容,其css代码为{width:100%;position:fixed;bottom:0;left:0},这看起来并没有什么问题,但在手机软键盘唤起进行输入的时候,红色矩形区域跟随软键盘而浮动起来,这时

水煮 ASP.NET Web API(1-3)如何接收 HTML 表单请求

问题 我们想创建一个能够处理 HTML 表单的 ASP.NET Web API 应用程序(使用 application/x-www-form-urlencoded 方式提交数据). 解决方案 我们可以创建一个 Controller Action 接收一个 Moddel,Model 的结构和准备从HTML 表单提交的准备处理的结构相似,模型绑定依赖于 ASP.NET Web API 来处理.模型中的属性名字和 HTTP 请求中要用的名字要匹配. public HttpResponseMessage