无法键入HTML文本/密码/数字输入字段(带有统一WebGL构建的网站)

Question

我们正在开发一个使用角9的站点，我们还在其中集成了一个Unity3D WebGL构建。当我试图在我的表单中键入文本/密码/数字输入字段时，它不会写任何东西，并且字段似乎没有接收到输入；而且，我绑定字段的变量没有用新值更新。更奇怪的是：

• ，我可以选择输入字段(它被高亮显示，就好像我可以开始键入)
• 我可以在字段上做CTRL+C，我复制到其他地方的东西被粘贴了，就像预期的那样
• I可以使用type="number"箭头选择器来设置字段的值。
• I不能从字段中的键盘键入
• I可以按照预期与其他表单标记(如<select> )进行交互。
• 如果我重新加载页面，它通常按预期的方式开始工作，并且可以键入字段。

下面是我登录表单中的代码(上面是component.ts，下面是模板HTML )

​

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service'
import { first } from 'rxjs/operators';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

  email: string = "";
  password: string = "";

  returnUrl: string = "home";

  constructor(private router: Router, private route: ActivatedRoute, private authService: AuthService) { }

  ngOnInit(): void {
    let tmpReturnUrl = this.route.snapshot.queryParams["returnUrl"];
    if (tmpReturnUrl != undefined)
    {
      console.log("true");
      this.returnUrl = tmpReturnUrl;
    }
    else
      console.log("false");

    setInterval(() => {
      console.log("EMAIL: " + this.email);
    }, 1000);
  }

  onSubmit(){
    this.authService.login(this.email, this.password)
    .pipe(first())
    .subscribe(
      result => {
        console.log("CAIOAOAOAOOA");
        this.router.navigate([this.returnUrl]);
      },
      err => console.log(err)
    );
  }
}

<div class="card z-depth-5 w-50">
  <div class="card-body">
    <div class="card-title">Log in</div>
    <div class="card-text">
      <form #companyLoginForm="ngForm" (ngSubmit)="onSubmit()">
        <mat-form-field>
          <mat-label>Email: </mat-label>
          <input matInput required type="text" name="email" id="email" [(ngModel)]="email">
        </mat-form-field>
        <mat-form-field>
          <mat-label>Password: </mat-label>
          <input matInput required type="password" name="password" id="password" [(ngModel)]="password">
        </mat-form-field>
        <button type="submit" [disabled]="!companyLoginForm.form.valid">Login</button>
      </form>
      <a routerLink="/company-register">
        <button mdbBtn type="button" color="primary" class="relative waves-light">Sign Up</button>
      </a>
    </div>
  </div>
</div>

​

在这里，我还使用了type="number"和<select>的另一个表单中的代码(component.ts，下面的模板)

​

import { Component, OnInit, Output } from '@angular/core';
import { BlockFormService } from '../block-form.service';
import { BlockData } from '../blockCardData';
import { BlockUtilsService } from '../block-utils.service';
import { ApiService } from '../../core/api.service'
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-block-form',
  templateUrl: './block-form.component.html',
  styleUrls: ['./block-form.component.less']
})
export class BlockFormComponent implements OnInit {

  updateComplete : Boolean = false;
  materials : string[];
  products : string[];
  varieties : string[];
  nations : string[];
  // companies : {name: string, id: string}[] = [];
  company : string = "";
  colors : string[] = ["White", "Grey", "Black", "Brown", "Red", "Green", "Yellow", "Blue"];
  blockData : BlockData = {_id : "", blockId: "",  company: "", material: "", product: "",
                variety: "", color: "", nation: "", modelName : "", imagePreview : "",
                price: null, blockNumber: "",
                length: null, height: null, width: null,
                weight: null
  };
  imagePreview: File = null;
  zipFile: File = null;

  invalidUpload: boolean = false;

  constructor( private blockFormService: BlockFormService, public blockUtils: BlockUtilsService, private companiesUtils: ApiService )
  { }

  ngOnInit(): void {
    this.materials = this.blockUtils.getMaterials();
    this.colors = this.blockUtils.getColors();
    this.companiesUtils.getLoggedCompany().subscribe(companiesResult => {
      this.blockData.company = companiesResult._id;
      this.company = companiesResult.name;
    });
  }

  onImageSelected(event){
    console.log(event.target.files[0]);
    if (event.target.files[0].type === "image/png")
    {
      if (this.invalidUpload)
        this.invalidUpload = false;
      this.imagePreview = event.target.files[0];
    }
    else{
      if (!this.invalidUpload)
        this.invalidUpload = true;
      event.target.value = null;
    }
  }

  onMaterialSet(newMaterial): void{
    console.log("Material set");
    this.products = this.blockUtils.getProducts(newMaterial);
    //console.log(this.products);
    // if (this.products.length > 0)
    //   this.blockData.product = this.products[0];
    // else
      this.blockData.product = "";

    this.onProductSet(this.blockData.product);
  }

  onProductSet(newProduct): void{
    console.log("Product set");
    this.varieties = this.blockUtils.getVarieties(this.blockData.material, newProduct);
    // if (this.varieties.length > 0)
    //   this.blockData.variety = this.varieties[0];
    // else
    this.blockData.variety = "";

    this.nations = this.blockUtils.getNations(this.blockData.material, this.blockData.product);
    if (this.nations.length > 0)
      this.blockData.nation = this.nations[0];
    else
      this.blockData.nation = "";

    this.onVarietySet(this.blockData.variety);
  }

  onVarietySet(newVariety): void{
    console.log("Variety set");
    // this.nations = this.blockUtils.getNations(this.blockData.material, this.blockData.product);
    // if (this.nations.length > 0)
    //   this.blockData.nation = this.nations[0];
    // else
    //   this.blockData.nation = "";
  }

  onSubmit(blockForm : NgForm, imageField, zipField): void{
    this.blockFormService.sendBlock(this.blockData, this.imagePreview, this.zipFile)
    .subscribe(res => {
      console.log("Sent!");
      this.updateComplete = true;
    });

    this.blockData = {
      _id: "", blockId: "", company: "", material: "", product: "",
      variety: "", color: "", nation: "", modelName: "", imagePreview: "",
      price: null, blockNumber: "",
      length: null, height: null, width: null,
      weight: null
    };
    blockForm.resetForm();
    imageField.value = null;
    zipField.value = null;
    this.imagePreview = null;
    this.zipFile = null;
  }
}

<div class="form-group">


  <div class="text-center" *ngIf='updateComplete'>
    Block added successfuly
  </div>

  <form #blockForm="ngForm" (ngSubmit)="onSubmit(blockForm, imageField, zipField)">
    <div class="container">
      <div class="row">
        <div class="col-3">
          <mat-form-field>
            <mat-label>Company: </mat-label>
            <!-- <mat-select required [(ngModel)]="blockData.company" name="company-field"
              id="company-field">
              <mat-option selected [value]="company.id">{{company.name}}</mat-option>
            </mat-select> -->
            <input matInput disabled [value]="company" type="text" name="company-field" id="company-field">
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Material: </mat-label>
            <mat-select #matField required [(ngModel)]="blockData.material" name="kind-field"
              id="kind-field" (selectionChange)="onMaterialSet(blockData.material)">
              <mat-option *ngFor="let mat of materials" [value]="mat">{{mat}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Product: </mat-label>
            <mat-select required [(ngModel)]="blockData.product" name="product-field"
              id="product-field" (selectionChange)="onProductSet(blockData.product)">
              <mat-option *ngFor="let prod of products" [value]="prod">{{prod}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Block Number: </mat-label>
            <input matInput required [(ngModel)]="blockData.blockNumber" type="text" name="blockNumber-field" id="blockNumber-field">
          </mat-form-field>
        </div>
      </div>

      <div class="row">
        <div class="col-3">
          <mat-form-field>
            <mat-label>Variety: </mat-label>
            <mat-select required [(ngModel)]="blockData.variety" name="variety-field" id="variety-field"
              placeholder="Variety" (selectionChange)="onVarietySet(blockData.variety)">
              <mat-option *ngFor="let variety of varieties" [value]="variety">{{variety}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="col-3">
          <!-- <label for="color-field">Color: </label> -->
          <mat-form-field>
            <mat-label>Color: </mat-label>
            <mat-select required [(ngModel)]="blockData.color" name="color-field" id="color-field" placeholder="Color">
              <mat-option *ngFor="let col of colors" [value]="col">{{col}}</mat-option>
            </mat-select>
          </mat-form-field>
          <!-- <input #colField required [(ngModel)]="blockData.color" type="text" name="color-field" id="color-field" placeholder="Color"> -->
          <!-- <color-circle #colorField [colors]='["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]' name="color-field" id="color-field" (onChange)="blockData.color = $event.color.hex"></color-circle> -->
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Nation: </mat-label>
            <!-- <mat-select required [(ngModel)]="blockData.nation" name="nation-field"
              id="nation-field">
              <mat-option *ngFor="let nat of nations" [value]="nat">{{nat}}</mat-option>
            </mat-select> -->
            <input matInput disabled [(ngModel)]="blockData.nation" type="text" name="nation-field" id="nation-field">
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Price: </mat-label>
            <input matInput required [(ngModel)]="blockData.price" type="number" name="price-field" id="price-field">
          </mat-form-field>
        </div>
      </div>

      <div class="row">
        <div class="col-3">
          <mat-form-field>
            <mat-label>Length: </mat-label>
            <input matInput required [(ngModel)]="blockData.length" type="number" name="length-field" id="length-field">
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Width: </mat-label>
            <input matInput required [(ngModel)]="blockData.width" type="number" name="width-field" id="width-field">
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Height: </mat-label>
            <input matInput required [(ngModel)]="blockData.height" type="number" name="height-field" id="height-field">
          </mat-form-field>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-label>Weight: </mat-label>
            <input matInput required [(ngModel)]="blockData.weight" type="number" name="weight-field" id="weight-field">
          </mat-form-field>
        </div>
      </div>

      <div class="row">
        <div class="col-3">
          <div class="file-field">
            <div class="btn btn-primary btn-sm float-left">
              <label for="image-field">Upload preview image: </label>
              <input #imageField (change)="onImageSelected($event)" name="image-field" id="image-field" type="file" accept=".png, image/png" placeholder="Upload your file">
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="file-field">
            <div class="btn btn-primary btn-sm float-left">
              <label for="zip-field">Upload models' zip: </label>
              <input #zipField (change)="zipFile = $event.target.files[0];" name="zip-field" id="zip-field" type="file" placeholder="Upload your file">
            </div>
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="!blockForm.form.valid || imagePreview == null || zipFile == null || blockData.company === ''">Submit</button>
    </div>
  </form>
</div>

​

我希望我说得够清楚，任何帮助都很感激:)

Answer 1

最后，我找到了问题的根源。在我们的网站中，我们已经集成了一个Unity3D WebGL构建，如果我从带有统一的网页移动到登录页面，那么统一进程仍然在运行。统一是键盘每个输入的焦点，所以它能捕捉所有的输入。

当我们改变页面时，我们用退出统一申请解决了这个问题。这样，输入字段就可以再次从键盘接收输入。

另一个解决方案，可能(我还没有测试它)，可以是不让Unity获得输入，就像在这个团结论坛的主题中讨论的那样，或者通过将https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html?_ga=2.257874316.641689340.1598708713-413984869.1598611524设置为false。