英文:
prevent negative numbers but accept decimals in HTML input
问题
我正在寻找一种方法来防止用户输入负数，但允许他们输入浮点数。
- 我正在使用Angular，所以Angular工具也需要考虑。
谢谢！
英文:
I'm looking for a way to prevent a user entering negative numbers , but allow them to type floating numbers
- I'm using angular so angular tools also is a consideration
Thanks !
答案1
得分: 3
您可以在keypress事件上使用一个简单的javascript函数，检测用户输入了-并禁用它。event.charCode != 45会检测并禁止用户输入破折号（-）。
<input type="text" onkeypress="return event.charCode != 45">
为了防止用户输入任何类型的文本，只允许输入数字，您可以将输入字段的type更改为number，并添加min属性为0。您还可以添加step属性以支持小数。
<input type="number" min="0.01" step="0.01" onkeypress="return event.charCode != 45">
英文:
You can use a simple javascript function on keypress and detect when the user enters a - and disable that. event.charCode != 45 detects and disables the user from typing a dash (-).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input type="text" onkeypress="return event.charCode != 45">
<!-- end snippet -->
An alternative to prevent user from enter any type of text and just enable only number you can change the type of the input field to number and add also the min attribute as 0. You can also add step attribute to be decimal.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input type="number" min=0.01 step=0.01 onkeypress="return event.charCode != 45">
<!-- end snippet -->
答案2
得分: 2
我最近为了确切的目的做了一个指令。考虑对其进行改进。
@Directive({
selector: '[money]',
standalone: true
})
export class MoneyDirective {
moneyRegex = /^[0-9]+$|^[0-9]+\.$|^[0-9]+(\.[0-9])$|^[0-9]+(\.[0-9][0-9])$/;
constructor(private ngControl: NgControl) {}
@HostListener('change', ['$event'])
onChange(event: Event): void {
if(this.ngControl.control?.valid && this.ngControl.control instanceof FormControl) {
let value: number = +this.ngControl.value;
this.ngControl.control.setValue(value.toFixed(2));
}
}
@HostListener('input', ['$event'])
onInput(event: InputEvent): void {
if (!this.moneyRegex.test(this.ngControl.control?.value)) {
let control = this.ngControl.control as FormControl;
control.setValue(control?.value?.substring(0, control?.value?.length -1));
}
}
}
然后只需在HTML中使用：
<input formControlName="price" money>
英文:
I did a directive recently for exactly that purpose. Consider improvements over it.
@Directive({
selector: '[money]',
standalone: true
})
export class MoneyDirective {
moneyRegex = /^[0-9]+$|^[0-9]+\.$|^[0-9]+(\.[0-9])$|^[0-9]+(\.[0-9][0-9])$/;
constructor(private ngControl: NgControl) {}
@HostListener('change', ['$event'])
onChange(event: Event): void {
if(this.ngControl.control?.valid && this.ngControl.control instanceof FormControl) {
let value: number = +this.ngControl.value;
this.ngControl.control.setValue(value.toFixed(2));
}
}
@HostListener('input', ['$event'])
onInput(event: InputEvent): void {
if (!this.moneyRegex.test(this.ngControl.control?.value)) {
let control = this.ngControl.control as FormControl;
control.setValue(control?.value?.substring(0, control?.value?.length -1));
}
}
}
Then just
<input formControlName="price" money>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论