如何基于使用 angular8 打字使输入显示为句子大小写

Question

嗨，我有一个输入字段，根据输入，我想将文本显示为句子大小写，但它显示为标题大小写。 如果我输入"hello hai how are you"它会显示为"Hello Hai How Are You"但我希望它显示为"Hello hai how are you" ，但如果用户在输入时只使用 CapsLock，那么它应该允许优先.

演示：

演示

带管道的 DEMO2：

使用的管道

HTML：

<div class="col-md-6 mb-3">
    <label for="input1">Input Field to be sentense case</label>
    <input  type="text" class="form-control text-capitalize" id="input1" placeholder="Name"
     formControlName="name"
     name="name"
      required />
  </div>

HTML2：

<form [formGroup]="myForm">
    <input formControlName="myNumber| titleCase" />
</form>

TS：

this.myForm = this.fb.group({
      myNumber: ["hello hai how are you"]
    });

管道.ts：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "titleCase" })
export class TitleCasePipe implements PipeTransform {
  public transform(input: string): string {
    console.log(input);
    if (!input) {
      return "";
    } else {
      return input.replace(
        /\b((?!=|\,|\.).)+(.)\b/g,
        first => first.substr(0, 1).toUpperCase() + first.substr(1)
      );
    }
  }
}

Answer 1

您可以使用.toUpperCase()和.toLowerCase()以及.substring()来实现如下效果：

 function turnIntoSentence(){ var input = document.getElementById("input"); input.value=input.value.substring(0,1).toUpperCase()+input.value.substring(1).toLowerCase(); }

 <input id="input" type="text" oninput="turnIntoSentence()">

我们可以强制第一个字母大写，其余字母小写。

 var input = document.getElementById("input"); function turnIntoSentence(){ input.value=input.value.substring(0,1).toUpperCase()+input.value.substring(1).toLowerCase(); } input.addEventListener("keyup", function(event) { if (event.getModifierState("CapsLock")) { input.value=input.value.toUpperCase(); }else{ turnIntoSentence(); } });

 <input id="input" type="text" oninput="turnIntoSentence()">

您还可以利用事件侦听器在启用大写锁定时允许大写。

如果您有多个输入字段：

 var input = document.getElementsByClassName("input"); function turnIntoSentence(){ for(var i = 0; i < input.length; i++){ input[i].value=input[i].value.substring(0,1).toUpperCase()+input[i].value.substring(1).toLowerCase(); } }

 <input class="input" type="text" oninput="turnIntoSentence()"> <input class="input" type="text" oninput="turnIntoSentence()"> <input class="input" type="text" oninput="turnIntoSentence()">

Answer 2

我想你想要这样的东西：

在你的 html 中：

<input  type="text" class="form-control" id="input1" placeholder="Name"
        formControlName="name"
        name="name"
        #name
        required 
        (input)="handleInputChange(name.value)"/>

在你的 ts 中：

handleInputChange(val: string){  
  val = val.substr(0,1).toUpperCase() + val.substr(1);
  this.form.name.setValue(val);
}