iOS - 键入时不出现文本，但在滚动时出现
<p><p>我正在创建一个 ionic 2 移动应用程序。</p>
<p>在 Android 和 Windows 上，不会出现此问题。</p>
<p>在我的页面上，我有 2 个输入。 1 表示标题，1 表示描述。</p>
<p>当我点击这些并开始输入时，一切正常。但是当我第一次滚动一点，然后点击我的输入并开始输入时，只显示第一个字母，其余的保持空白。</p>
<p>在用户输入内容后，它仍然是空白，但随后滚动了一点(同时仍然专注于输入)，文本就会出现。</p>
<p>我的html:(完整)</p>
<pre><code><ion-content #content padding>
<img *ngIf="imageSrc" #image class="taken-image" ="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>
</code></pre>
<p>所以在这里我已经尝试将 <code>z-index</code> 设置为 9000 以上，但问题仍然存在。</p>
<p>我还尝试添加一个 <code>onkeyup</code> 事件，在该事件中我试图“伪造”一个没有结果的滚动。</p>
<p>我的 <code>ts</code> 代码(相关的、有趣的部分):</p>
<pre><code>changedInput(event:any) {
// fake scroll, no effect
window.scrollBy(0, 2);
// setting description as a test
this.description = event.target.value;
}
</code></pre>
<p>就是这样，我不会在此类中修改我的 typescript 中的 DOM 元素。</p>
<p>我的 <code>scss</code> 认为这可能是一个 css 问题，所以我也会添加它</p>
<pre><code>.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;
}
}
</code></pre>
<p><strong>重要提示</strong></p>
<ul>
<li><code>onkeyup</code> 不在原始代码中，我尝试将此作为解决方案但失败了。</li>
<li>原始代码也使用了 <code>ion-textarea</code> 而不是 <code>textarea</code>。</li>
<li>已经重新安装了 <code>ionic-plugin-keyboard</code> -> 2.2.1 & 2.2.4 版(我认为)</li>
<li>文本<strong>确实</strong>在滚动后显示，您可以看到光标移动</li>
<li>当输入 g、q、p 等时，您甚至可以看到超出法线的部分(例如，q 和 p 显示该线)就像某些东西只是悬停在我正在输入的确切行的顶部<</li>
</ul></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>所以由于某种原因，在我的文本区域和输入字段上添加 <code>transform: translateZ(0px);</code> 之后。在添加了一个实际上不滚动的“假”诱导滚动之后:</p>
<p><code><ion-content> ...... </ion-content></code></p>
<pre><code>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);
}
</code></pre>
<p>无论您的内容有多大，它都不会滚动。这是相对于body标签的。</p></p>
<p style="font-size: 20px;">关于iOS - 键入时不出现文本，但在滚动时出现，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45483943/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45483943/
</a>
</p>
页:
[1]