离子2-键盘上的输入“ GO”字段正在做两件事

Question

我正在为iOS＆amp;构建一个离子应用到目前为止，我有一个表格，用户可以上传或拍照，然后填写其他一些信息并提交表格。

我的问题：

当前用户转到输入输入一些额外的文本时，键盘底部有一个GO按钮。如果用户单击此" go"按钮，它将尝试提交表格，并打开我拥有的choosePicture()函数。

当我单击时会发生什么GO按钮 - 打开库

html

<ion-item class="file-upload">
    <button  class="btn btn-block" ion-button (click)="choosePhoto()">Choose a Photo</button>
    <span class="sep"></span>
    <button class="btn btn-block" ion-button (click)="takePicture()">Take a Picture</button>
    <div class="uploaded-img">
        <input type="file" value="" formControlName="hazardImage" hidden />
        <span class="img-desc">Please Take or Upload an Image.</span>
        <div class="img-picked" *ngIf="base64Img">
            <img [src]="base64Img" alt="Hazard Picture" />
            <!-- <img src="http://placehold.it/300x300" alt="Test Image" /> -->
        </div>
    </div>
</ion-item>
<small class="small-title">Where is the Hazard Location? (required)</small>
<ion-item class="input-box">
    <ion-input type="text" formControlName="hazardLocation" [class.invalid]="!hazardForm.controls.hazardLocation.valid && (hazardForm.controls.hazardLocation.dirty || submitAttempt)"></ion-input>
</ion-item>

打字稿：

choosePhoto()
{
    this.Camera.getPicture({
        quality: 50,
        destinationType: this.Camera.DestinationType.DATA_URL,
        encodingType: this.Camera.EncodingType.JPEG,
        sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true
    }).then((ImageData) => {
        // console.log(ImageData);
        this.base64Img = ImageData;
        this.hazardForm.patchValue({
            hazardImage: this.base64Img
        });
    }, (err) => {
        console.log(err);
    })
}

我不明白为什么Go按钮打开了选择照片的功能：/

Answer 1

您可以使用：

修改'GO'键盘按钮的行为

@ViewChild('input-box') inputElm: ElementRef;
@HostListener('keyup', ['$event'])
keyEvent(e) {
if(!e.srcElement) return; //browser fix
var code = e.keyCode || e.which;
if (code === 13) {
  if (e.srcElement.tagName === "INPUT") {
    e.preventDefault();
    //handle other behaviours
  }
}
};

Answer 2

您已经将<input>定义为"危险位置"为表格，因为有一个formControlName="hazardLocation"属性。这使得Go或形式提交按钮出现在移动键盘中。

相反，您应该将其作为普通输入字段，如这样

<input [(ngModel)]="hazardLocation">