完整)我正在创建一个 ionic 2 移动应用程序。
在 Android 和 Windows 上，不会出现此问题。
在我的页面上，我有 2 个输入。 1 表示标题，1 表示描述。
当我点击这些并开始输入时，一切正常。但是当我第一次滚动一点，然后点击我的输入并开始输入时，只显示第一个字母，其余的保持空白。
在用户输入内容后，它仍然是空白，但随后滚动了一点(同时仍然专注于输入)，文本就会出现。
我的html完整)
<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> <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;
}
就是这样，我不会在此类中修改我的 typescript 中的 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 版(我认为)所以由于某种原因，在我的文本区域和输入字段上添加 transform: translateZ(0px); 之后。在添加了一个实际上不滚动的“假”诱导滚动之后:
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);
}
无论您的内容有多大，它都不会滚动。这是相对于body标签的。
关于iOS - 键入时不出现文本，但在滚动时出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45483943/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |