简体   繁体   English

我正在尝试创建一个仅允许使用打字稿输入数字的文本框。 见下面的例子

[英]I am trying to create a text box which allows only numbers using typescripts. See below example

using typescript I want to create a textbox whixh allows on numbers. 使用打字稿我想创建一个文本框,允许数字。

textbox-alpha.ts 文本框

    import {bindable} from 'aurelia-framework';

export class textboxNumber {

@bindable public allownumber : number;
} 
  function onlynumber(allownumber) {
    allownumber = (allownumber) ? allownumber : event;
    var charCode = (allownumber.charCode) ? allownumber.charCode : ((allownumber.keyCode) ? allownumber.keyCode :
  ((allownumber.which) ? allownumber.which : 0));
    if (charCode > 31 && (charCode < 65 || charCode > 90) &&
    (charCode < 97 || charCode > 122)) {

        return false;
    }
    return true;
  }

textbox-alpha.html textbox-alpha.html

<input type="text" onkeypress="onlynumber(allownumber)" required />

无需为此创建自定义元素,因为有内置输入类型。

<input type="number" />

Use the pattern attribute to validate the input on form submission and let the browser do the work. 使用pattern属性可以验证表单提交中的输入,并让浏览器完成工作。

 const form = document.querySelector('form'); form.addEventListener('submit', e => { // preventing the form from being submitted so that multiple inputs can be tested e.preventDefault(); alert('submit'); }); 
 <form> <input type="text" pattern="-?\\d*" title="Value must be an integer" required /> <input type="submit" value="submit" /> </form> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何在 React 中制作一个只允许数字或空值的文本框,这会触发移动设备上的数字键盘? - How can I make a text box in React which allows only numbers or an empty value, which triggers the number keypad on mobile? 我想创建仅允许数字的文本框。 如何使用aurelia中的Typescript做到这一点? - I want to Create textbox which allows only numbers. How can I do that with Typescript in aurelia? 如何编写一个指令,该指令需要在文本框中输入内容,并且只允许基于正则表达式的某些字符? - how to write a directive which takes input in text box and allows only some characters based on regex? 我正在创建一个数组以响应打印图像 select 仅基于数字我想要的图像 - i am create an array in react to print images select only images i want based on to numbers 我正在尝试查看用户是否已登录,如果未登录,则将其推送到登录页面 - I am trying to see if the user is logged in and if not push them to the login page 为什么我不能在我的输入框中保存带有十进制值的数字? 它只允许更新整数? - Why can't I save a number with decimal values in my input box? It only allows integers to be updated? TypeScripts转换不可执行的文件 - TypeScripts transpiles files which are non-executable 如何启用 Typescripts 本机列表? - How do I enable Typescripts native List? 等待看到类声明时在TypeScript中使用接口 - Using interfaces in TypeScript when I am waiting to see a class declaration 我试图发明FP的车轮名称是什么? (见代码) - What is the name of the wheel from FP, that I am trying to invent? (see the code)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM