Question

我正在创建一个离子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>  &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 - ＆gt;版本2.2.1＆amp; 2.2.4（我认为）
滚动后显示文字，您可以看到光标移动
当输入ag，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);
}

无论您的内容有多大，这都不会滚动。这与身体标签有关。

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

1 个答案: