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

Question

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

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

Note that this approach will not handle copy/paste into the text box. — Soc, Sep 15 '19 at 07:57

score 0 · Answer 1 · answered Sep 15 '19 at 02:50

0

There's no need to create a custom element for this as there is a built in input type for this.

<input type="number" />

answered Sep 15 '19 at 02:50

Ashley Grant

10,879
24
36

Right! but I don't want to do that way. – JP217 Sep 15 '19 at 02:56
Why not? Please elaborate. Is there a specific requirement that won't be met with this? – Soc Sep 15 '19 at 07:53
when we use type=number than you see some up and down icon in right and side corner of the textbox. and thats a things i dont like. – JP217 Sep 16 '19 at 02:28
I mean, it is possible to hide those icons: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box – Ashley Grant Sep 16 '19 at 15:21

score 0 · Accepted Answer · answered Sep 15 '19 at 08:21

Use the pattern attribute to validate the input on form submission and let the browser do the work.

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>

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

textbox-alpha.ts

textbox-alpha.html

2 Answers2