[英]How to make input appear as sentence case based on typing using angular8
Hi i have an input field, where in based on typing i want to show the text as sentence case, but it is appearing as title case.嗨,我有一个输入字段,根据输入,我想将文本显示为句子大小写,但它显示为标题大小写。 If i type "hello hai how are you"
it displays as "Hello Hai How Are You"
but i want this to appear as "Hello hai how are you"
, but if user only user CapsLock while typing then it should allow that as priority.如果我输入"hello hai how are you"
它会显示为"Hello Hai How Are You"
但我希望它显示为"Hello hai how are you"
,但如果用户在输入时只使用 CapsLock,那么它应该允许优先.
DEMO:演示:
DEMO2 with Pipe:带管道的 DEMO2:
HTML: 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: HTML2:
<form [formGroup]="myForm">
<input formControlName="myNumber| titleCase" />
</form>
TS: TS:
this.myForm = this.fb.group({
myNumber: ["hello hai how are you"]
});
pipe.ts:管道.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)
);
}
}
}
You can use .toUpperCase()
and .toLowerCase()
along with .substring()
to achieve the effect like so:您可以使用.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()">
We can force the first letter to be uppercase, and the remaining letters to be lowercase.我们可以强制第一个字母大写,其余字母小写。
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()">
You can also leverage an event listener to allow for capitals when CAPS LOCK is enabled.您还可以利用事件侦听器在启用大写锁定时允许大写。
In the case that you have multiple input fields:如果您有多个输入字段:
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()">
I think you want something like this:我想你想要这样的东西:
In your html :在你的 html 中:
<input type="text" class="form-control" id="input1" placeholder="Name"
formControlName="name"
name="name"
#name
required
(input)="handleInputChange(name.value)"/>
In your ts :在你的 ts 中:
handleInputChange(val: string){
val = val.substr(0,1).toUpperCase() + val.substr(1);
this.form.name.setValue(val);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.