iOS - 键入时不显示文本，但在滚动时显示

Question

我正在创建一个 ionic 2 移动应用程序。

在 Android 和 Windows 上，此问题不会发生。

在我的页面上，我有 2 个输入。 1 个用于标题，1 个用于描述。

当我点击这些并开始输入时，一切正常。但是当我第一次滚动一点，然后点击我的输入并开始输入时，只显示第一个字母，其余部分保持空白。

用户键入某些内容后，它保持空白，但随后滚动一点(同时仍专注于输入(，文本就会出现。

我的网页：(完整(

<ion-content #content padding>
<img *ngIf="imageSrc" #image class="taken-image" [src]="sanitizer.bypassSecurityTrustUrl(imageSrc)"/> 
<ion-list>
<ion-item>
<ion-label color="white-text" inline>Title</ion-label>
<!-- Issue #1 -->
<!-- HERE -->   <ion-input style="z-index: 9999999999999999999" [(ngModel)]="imageData.title" placholder="Enter a title" (onkeyup)="changedInput()"></ion-input>
</ion-item>
<ion-item class="item-no-padding">
<button class="blue-button" outline ion-button block icon-left tappable (click)="selectCat()"><ion-icon name="arrow-dropdown"></ion-icon>Select Cats</button>
<div *ngIf="selectedCats">
Selected Cat(s):
<ion-list>
<ion-item class="close-item" *ngFor="let spot of selectedCats">
{{spot.value}}
</ion-item>
</ion-list>
</div>
</ion-item>
<ion-item class="item-no-padding">
<button class="blue-button" outline ion-button block icon-left tappable (click)="selectCat1()"><ion-icon name="arrow-dropdown"></ion-icon>Select Cat1</button>
<div *ngIf="selectedCat1">
Selected Cat1:
<ion-list>
<ion-item class="close-item" *ngFor= "let spot of selectedCat1">
{{spot.value}}
</ion-item>
</ion-list>
</div>
</ion-item>
<ion-item class="item-no-padding">
<!--<ion-textarea class="text-area" [(ngModel)]="description" placeholder="Enter a description (optional)" (onkeyup)="changedInput()" clearInput>
</ion-textarea> -->

<!-- HERE -->   <textarea style="z-index: 999999999999999999999" [(ngModel)]="description" placeholder="Enter a description" (onkeyup)="changedInput()"></textarea>
</ion-item>

</ion-list>  
<div class="send-button-wrapper">
<p class="send-button" (click)="send()"><span class="send-button-text">Send</span>  &nbsp;&nbsp;&nbsp;<button ion-fab class="send-button" color="main-text"><ion-icon name="send"></ion-icon></button></p>
</div>
<white-leaves-background></white-leaves-background>
</ion-content>

所以在这里我已经尝试将z-index设置为 9000 以上，但问题仍然存在。

我还尝试添加一个onkeyup事件，我试图"伪造"滚动而没有结果。

我的ts代码(相关的、多汁的部分(：

changedInput(event:any) { 
// fake scroll, no effect       
window.scrollBy(0, 2);
// setting description as a test
this.description = event.target.value;
}

就是这样，在本课程中，我不修改打字稿中的 DOM 元素。

我的scss认为这可能是一个 css 问题，所以我也会添加它

.item-no-padding {
.item-inner {
padding-right: 0 !important;
}
}
.fab ion-icon {
font-size: 3.4rem;
}
.send-button-wrapper {
font-family: Quicksand-Bold;
margin-top: 25%;
text-align: right;
}
.send-button-text {
font-size: 3.4rem;
color: white;
margin-top: 10%
}
.send-button {
margin-top: -10%;
font-size: 20px;
float: right;
}
.close-item {
min-height: 3.4rem !important;
ion-label {
margin: 0 !important;
}
}
.taken-image {
width: 50%;
margin-left: 25%;
}
.text-area {
height: 80px;
resize: none;
border: 1px solid #cccccc;
}
::placeholder {
color: black !important;
}
image-edit{
.app-background {
img {
filter: opacity(25%);
}
}
ion-label {
margin: 13px 0 13px 0 !important;
}
ion-input {
.button {
background-color: transparent;
color: white;
box-shadow: none;
}
}
.very-important-to-show {
opacity: 0;
}
.item-button {
padding: 0;
margin: 0;
height: 40px !important;
font-size: 14px !important;
width: 100%;
text-align: center !important;
color: white !important;
border: none !important;
}
.card, .item {
background-color: rgba(255,255,255,0) !important;
}
}

重要说明

• onkeyup不在原始代码中，我尝试将其作为解决方案，但失败了。
• 原始代码也使用ion-textarea而不是textarea。
• 已经重新安装ionic-plugin-keyboard->版本2.2.1和2.2.4(我认为(
• 滚动后确实会显示文本，您可以看到光标移动
• 当输入g，q，p等时，您甚至可以看到超过正常行的部分(例如q和p显示该行(，就像某些东西只是悬停在我正在键入的确切行的顶部一样。

Answer 1

因此，出于某种原因，在我的文本区域和输入字段上添加transform: translateZ(0px);之后。在添加了一个实际上不会滚动的"假"诱导卷轴后：

<ion-content> ...... </ion-content>

import { Content } from 'ionic-angular';
import { ViewChild } from '@angular/core';
....
@ViewChild(Content) content: Content;
....
changedInput() {
// scroll the content to the same place in 1ms
this.content.scrollTo(0, 0, 1);
}

无论您的内容有多大，这都不会滚动。这是相对于正文标签的。