我想只得到正的值,有什么方法来防止它只使用html 请不要建议验证方法
当前回答
对我来说,解决方案是:
<input type=“number” min=“0” oninput=“this.value = Math.abs(this.value)”>
Edit
正如注释中所建议的那样,如果0是最小值,则需要进行微小的更改。
<输入类型=“数字” min=“0” oninput=“this.value= !!this.value && Math.abs(this.value) >= 0 ?Math.abs(this.value) : null“>
其他回答
如果你不想在HTML中添加更多代码,只需要添加另一种方法(使用Angular):
您只需要订阅字段valueChanges并将Value设置为绝对值(注意不要触发新事件,因为这会导致另一个valueChange,因此会触发递归调用并触发最大调用大小超出错误)
HTML代码
<form [formGroup]="myForm">
<input type="number" formControlName="myInput"/>
</form>
TypeScript代码(在组件内部)
formGroup: FormGroup;
ngOnInit() {
this.myInput.valueChanges
.subscribe(() => {
this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
});
}
get myInput(): AbstractControl {
return this.myForm.controls['myInput'];
}
这个解决方案允许所有键盘功能,包括复制粘贴键盘。它可以防止用鼠标粘贴负数。它适用于所有浏览器,代码依赖的演示使用了bootstrap和jQuery。这应该适用于非英语语言设置和键盘。如果浏览器不支持粘贴事件捕获(IE),它将在焦点消失后删除负号。这个解决方案的行为与本机浏览器的min=0 type=number一样。
标记:
<form>
<input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
<input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>
Javascript
$(document).ready(function() {
$("input.positive-numeric-only").on("keydown", function(e) {
var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
e.preventDefault();
}
});
$("input.positive-numeric-only").bind("paste", function(e) {
var numbers = e.originalEvent.clipboardData
.getData("text")
.replace(/[^0-9^.^,]/g, "");
e.preventDefault();
var the_val = parseFloat(numbers);
if (the_val > 0) {
$(this).val(the_val.toFixed(2));
}
});
$("input.positive-numeric-only").focusout(function(e) {
if (!isNaN(this.value) && this.value.length != 0) {
this.value = Math.abs(parseFloat(this.value)).toFixed(2);
} else {
this.value = 0;
}
});
});
简单的方法:
<input min='0' type=“number” onkeypress=“return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57”>
下面是一个角度上的解决方案:
创建一个类OnlyNumber
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
// Allow decimal numbers. The \. is only allowed once to occur
private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
// Allow key codes for special events. Reflect :
// Backspace, tab, end, home
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
// Do not use event.keycode this is deprecated.
// See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
let current: string = this.el.nativeElement.value;
// We need this because the current value on the DOM element
// is not yet updated with the value from this event
let next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
将OnlyNumber添加到app.module.ts中的声明中,并像这样在应用程序的任何地方使用它
<input OnlyNumber="true">
我想允许小数,如果输入负数,不清除整个输入。这在铬至少工作良好:
<input type="number" min="0" onkeypress="return event.charCode != 45">
推荐文章
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- Java生成两个给定值之间的随机数
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?