Ionic 4-如何保持表单的固定高度，以防止打开键盘时提交按钮上升？
Ionic 4是一个流行的跨平台移动应用开发框架，它基于Angular和Apache Cordova构建。在Ionic 4中，要保持表单的固定高度以防止打开键盘时提交按钮上升，可以采取以下步骤：
- 使用Ionic提供的ion-content组件来包裹表单内容。ion-content组件可以自动处理键盘弹出时的滚动效果，并且可以设置固定高度。
- 在ion-content组件中，设置scrollEvents属性为false，以禁用滚动事件。这样可以确保表单内容不会因为滚动而改变高度。
- 使用CSS样式来设置表单的固定高度。可以通过设置ion-content组件的内联样式或者在全局样式文件中添加样式来实现。例如，可以设置表单的高度为固定值或者使用百分比来适应不同屏幕尺寸。
以下是一个示例代码：
<ion-content scrollEvents="false" style="height: 80%;">
<!-- 表单内容 -->
</ion-content>在上面的示例中，ion-content组件的scrollEvents属性被设置为false，样式中的height属性被设置为80%。这将使表单内容在打开键盘时保持固定的高度，并且不会导致提交按钮上升。
对于Ionic 4的更多信息和详细的API文档，可以参考腾讯云的Ionic 4产品介绍页面：Ionic 4产品介绍
相关·内容
4回答
离子离子含量在键盘显示时不会向下滚动(Android)
javascript、angularjs、cordova、ionic-framework
我有一个简单的视图与登录表单。在Android上，如果打开键盘，内容就不会滚动以阻止它在键盘后面移动。
我遵循了文档中的键盘指令，并阅读了很多论坛文章，但我还没有弄清楚。
我安装了键盘插件com.ionic.keyboard。
这是页面的结构：
<ion-nav-view>
<ion-view>
<ion-content>
...<form>..Login form..</form>...
</ion-content>
</ion-view>
</ion-nav-vi
浏览 0提问于2015-01-08得票数 9
1回答
在设备中测试时离子型菜单关闭中的问题
ionic4、ngcordova、ion-menu
我是ionic4的新手。在此之前，我尝试一下菜单中的ionic3是否正常工作。但是现在我迁移到了ionic4。我只是创建新的项目与内置菜单选项。它在网络浏览器中成功运行，但是当我在我的Android移动设备上运行时，菜单打开了，但点击后没有关闭。
我使用:离子版本:5.2.3节点版本:v10.16.3 Cordova版本:9.0.0
第一次尝试：我的app.component.html文件：
<ion-app>
<ion-menu type="overlay"side="start" contentId="menu-content
浏览 1提问于2019-09-13得票数 0
10回答
如何禁用或隐藏Ionic 2<离子内容>中的滚动条
ionic-framework、angular、ionic2
我有一个用Ionic 2包装的角形2应用程序，我使用的是<ion-tabs>，在每个选项卡中都有一个<ion-content>。这个区域的内容需要是可滚动的，但是Ionic 2添加了一个我不想显示的滚动条。看来，在编译时，<ion-content>中注入了一个<scroll-content>。我不想要这种行为。
我尝试过许多以前在Ionic 1中工作的解决方案，但它们在Ionic 2中却不起作用：
在scroll="false"上设置<ion-content>
在scrollbar-y="false&#
浏览 16提问于2016-03-12得票数 30
回答已采纳
1回答
离子4&角8 PWA -在Android浏览器中隐藏页脚
ionic-framework、ionic4、angular8、progressive-web-apps
我正在创建一个带有角8和Ionic 4的PWA，我使用的是“ion”，但是在Android浏览器中，键盘推动了组件。
我已经看到，在Ionic原住民中，您可以使用Cordova ()来管理键盘控制，但我需要它用于PWA。有什么解决办法吗？
<ion-content>
</ion-content>
<ion-footer>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
浏览 3提问于2020-02-26得票数 0
回答已采纳
3回答
可滚动离子内容的Ionic4打印媒体查询
media-queries、ionic4
很简单的问题。在我的Ionic4应用程序中有可滚动的离子内容。我希望能够通过应用@media only print样式来优雅地打印它。我快到了，但我有一个大问题。我不能让垂直滚动条消失打印。此外，我只打印了一页，只包含打印页面时所看到的内容。我已经在网上搜索过解决方案，并在Ionic3和更早的时候遇到并尝试了各种建议，但我还没有找到Ionic4的神奇之处。有没有人遇到并弄清楚这件事的真相？
浏览 0提问于2019-09-10得票数 5
1回答
Android离子键盘滚动问题
javascript、android、angularjs、ionic-framework、android-softkeyboard
我正在使用ionic 1.4.2在android上开发一个应用程序。并且使用离子键盘插件。
我遇到了这个问题:在登录页面中，如果单击(聚焦)输入，表单将不会滚动到中心，但是如果我键入键盘输入字符，表单将滚动到中心。
在iOS上，没有这样的问题。
<ion-content scroll="true" overflow-scroll="false" class="loginDiv" ng-show="loginViewVisible">
<form></form>
</ion-cont
浏览 4提问于2017-03-13得票数 0
7回答
如何防止移动键盘在文本字段中的页脚上升？
android、html、css、twitter-bootstrap、mobile-browser
我的脚有点问题。我想让页脚留在屏幕的底部，但是有一个小问题。使用移动浏览器时，一些字段在打开键盘时会被页脚阻塞。页脚上升到键盘上，并阻塞您正在键入的字段。我如何保持我的脚在底部，并防止它上升到键盘上？我要把它藏在键盘下面。
我正在使用引导程序，但是我在我自己的CSS中设置了以下内容：
footer {
width: 100%;
position:absolute;
left:0px;
bottom:0px;
height: 40px;
margin: auto;
overflow: hidden;
background:#2E2E2E;
text-align:center;
浏览 1提问于2014-03-25得票数 22
回答已采纳
1回答
在我的Ionic 4框架中，我想在单击submit按钮时提交一个表单。
当我点击submit按钮时，我想得到用户名和密码。
`enter code here`
this is my ts file in ionic4
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
expo
浏览 8提问于2019-03-26得票数 0
5回答
为什么Ionic 5内容填充不起作用？
ionic-framework、ionic5
升级到Ionic 5时，填充属性不再像Ionic 4那样工作：
<ion-content color="primary" padding></ion-content>
有什么解决办法吗？
浏览 5提问于2020-02-13得票数 7
回答已采纳
1回答
如何在IONIC4的键盘上添加按钮
cordova、ionic-framework、cordova-plugins、ionic4、ionic-native
我一直在尝试使用Ionic4在键盘顶部添加一个“提交”按钮，但到目前为止还没有成功。这有可能吗？ 我正在使用Ionic Native键盘插件，并且我已经在我的config.xml上添加了<preference name="KeyboardResize" value="false" /> 这是我的html底部的内容。 <ion-footer>
<ion-toolbar>
<ion-button style="position: absolute; bottom: 0; right: 5px
浏览 25提问于2019-12-28得票数 0
回答已采纳
2回答
离子4-键盘推高内容
angular、typescript、cordova、ionic-framework
我正在开发一个Ionic 4应用程序。我遇到的问题是，每当用户打开键盘时，App内容都会向上移动，然后当键盘关闭时，标题的一部分就隐藏在我手机的statusbar后面。
在Ionic 3中，我知道这是可以解决的，修改离子卷轴的样式作为一个解决办法，但在这里，这是行不通的。
有人能帮我吗？
谢谢。
浏览 2提问于2019-03-23得票数 5
回答已采纳
3回答
OnScroll事件离子2
angular、typescript、ionic-framework、ionic2
当用户在Ionic 2上滚动时，拾取让我感到困惑。我基本上想说的是，当用户向下滚动页面时，做点什么。
任何例子都是很棒的。
更新：
我在我的构造函数中有这个，所以当页面滚动时，我想关闭键盘，因为它是打开的，没有其他关闭的方法。
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Content } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keybo
浏览 0提问于2017-04-03得票数 10
回答已采纳
6回答
无法在scrollView中滚动
javascript、css、reactjs、react-native、uiscrollview
我有一个屏幕，在输入字段中输入并得到相应的搜索结果。列表在ScrollView中呈现，但当键盘打开时，它仍然不允许我滚动(在Android中)。
我怎么才能解决这个问题？
return (
<>
{addressesFound.length > 0 ? (
<ScrollView
style={styles.searchResultsContainer}
keyboardShouldPersistTaps={'always'}
keyboardDismis
浏览 3提问于2020-08-16得票数 1
回答已采纳
1回答
离子4:科多瓦相机预览隐藏html元素，尽管"toBack“设置为”真“。
cordova、ionic-framework、cordova-plugins、ionic4、capacitor
对于一个大学项目，我必须使用Ionic 4实现一个Ionic应用程序。
该应用程序使用地理定位在地图中显示街道艺术的位置。
在另一个菜单选项卡中，您可以扫描一个QR，它从.json中提供关于特定街道艺术的数据，并使用cordova插件在摄像机预览中显示它。
扫描是完美的，然后相机预览打开，但我看不到对象从.html，即使"toBack“被设置为”真“。
我真的被这个问题困住了，找不到任何解决办法。
import { Component, OnInit, Inject, ViewEncapsulation } from '@angular/core';
import
浏览 0提问于2019-08-06得票数 2
回答已采纳
10回答
禁用内容弹跳卷轴
ios、ionic-framework
在我的hybrid应用程序中，有可能拖动屏幕刷新列表。在Android中，这很好，但是在iOS上，当我向下拖拽时，它有时会将它与滚动页面混为一谈，因此它具有溢出/弹跳的效果。
在ionic中，有一个属性可以用来禁用它，但是它不起作用：
<ion-content id="questions" has-bouncing="false">
config.xml已经有以下几行代码：
<preference name="webviewbounce" value="false"/>
<preference
浏览 9提问于2016-02-22得票数 7
回答已采纳
1回答
从离子页脚4上删除(或替换) role="contentinfo“
ionic-framework、accessibility、ionic4、wai-aria
我在Ionic4上使用一个Ionic4标记将内容放在页面底部：
离子型自动在role="contentinfo"标签上添加一个<ion-footer>属性。
内容信息地标角色用于识别网站每一页末尾重复的信息，包括版权信息、导航链接和隐私声明()。
在我的例子中，我不使用<ion-footer>来重复显示信息，所以为了更容易访问，我想删除这个属性，或者用role="presentation"替换它。
是否可以在<ion-footer>标记上更改此属性的值？
谢谢你的帮助。
浏览 3提问于2019-11-29得票数 0
回答已采纳
8回答
离子3.2 -如何禁用离子卷轴-内容？
cordova、ionic-framework、ionic2、ionic3
我正在开发一个Ionic 3.2版本的应用程序。我在离子卷轴里面有一个离子刷新器。我希望禁用ion-content的滚动，并希望在滚动ion-list时在ion-scroll中显示ion-list。但失败了。
我尝试了no-bounce (<ion-content no-bounce>)和disable-scroll (<ion-content disable-scroll>)，但仍然在滚动内容。
我试着把ion-fixed放在content里面，把它放在content下面的div里面。但是接着ion-refresher就不能工作了。
我尝试了scroll=
浏览 11提问于2017-05-25得票数 6
2回答
在<离子内容>中获得帆布的初始高度/宽度
typescript、dom、ionic4、angular8
我有一个IONIC4 4/Angular8 8设置，有一个标题和分隔窗格菜单。然后，我将BabylonJS引擎加载到#canvas在<ion-content>中的视图-子程序中。
因此，我需要正确设置画布的高度和宽度。使用window.innerHeight/window.innerWidth将始终包括菜单和标题。
我有一个工作窗口-调整事件侦听器的大小，但是第一个初始的BabylonJS视图总是被扭曲。
我的问题是，如何动态地获得画布的宽度和高度？canvas.nativeElement.clientHeight是我的假设--但我总是得到0。
有什么暗示吗？
更新
我尝试了建议的
浏览 3提问于2019-09-18得票数 3
1回答
如何保持离子卡的纵横比
css、ionic-framework、sass、ionic2、aspect-ratio
我有一张卡片列表显示在我的Ionic页面上，我希望它们按比例展开。这是我的密码：
<ion-content class="home" padding>
<ion-card class="event-item" *ngFor="let item of items">
<div [ngStyle]="{'background-image': 'url(' + item.img + ')'}" class="card-thumbnail
浏览 0提问于2017-08-02得票数 1
回答已采纳
1回答
显示键盘的滚动页
xaml、windows-phone-7、windows-phone-8、windows-phone
我有一个问题:我在滚动视图中有一个固定高度的页面：
这是一页
当我弹出键盘时：
现在键盘有50%的屏幕，我想要页面的可见部分滚动-如何使它。因为如果用户在页面-键盘上的磁带不会关闭，一些用户会尝试滚动直到他们到达发送按钮。
这是我的xaml：
<ScrollViewer HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0">
<Grid Margin=
浏览 1提问于2013-08-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
