How to block Numberbox or Textbox characters

Question

I have a form from DevExtreme and in this form I have a NumberBox which is from a telephone field, but this field accepts only números (obvious), . and ,, but the phone, it could be like (xxx)xxxxx-xxxx accepting only hyphen, parentheses and number, but my field does not allow me to do this, my phone field is of type string then I can change from NumberBox for TextBox, but with TextBox I need to limit to accept only números, hífens e parênteses, I know I can use the onkeypress which calls a function in Javascript, but I don’t know how to create this function, how can I do this?

I’m not gonna post all the code 'cause it’s really big .

groupItems.AddSimpleFor(m => m.Bcx_telefone).CssClass("agTel")
.Editor(e => e.NumberBox().Width("100px").Max(9999999999).ID("agTelId"));

For now it is as shown above, but with TextBox, gets like this:

groupItems.AddSimpleFor(m => m.Bcx_telefone).CssClass("agTel")
.Editor(e => e.TextBox().Width("100px").MaxLength(15).OnKeyPress("key_press").ID("agTelId"));

Javascript:

function key_press(e) {
    //Não sei como continuar e bloquear os caracteres 
}

Answer 1

Instead of using the attribute OnKeyPress, use a Event Handler. Thus, with the function .test() you can cancel the event by restricting the allowed characters with a simple regular expression (Regex).

Remove from the code the part .OnKeyPress("key_press"). You will pull the textbox through id, thus remaining:

document.getElementById("agTelId").onkeypress = function(e){
   if(!/[()-\d]/.test(e.key)) e.preventDefault();
}

A Regex: [()-\d]

The characters inside the brackets [] indicate which characters are allowed, in the case of parentheses (), the hyphen - and any number from 0 to 9, represented by the words \d.

Test example:

document.getElementById("agTelId").onkeypress = function(e){
   if(!/[()-\d]/.test(e.key)) e.preventDefault();
}

<input type="text" id="agTelId">

Answer 2

Because there are different types of keyboard, and this validation is on the client side, it is not possible to cover 100% of the cases. So always keep your validations first on the server-side, and replicate them in the client-side.

To achieve this with the Keypress event, control with a regular expression:

function validate(e) {
  var _event = e || window.event;

  if (_event.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
      var key = _event.keyCode || _event.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\(|\)|\-/;
  if(!regex.test(key)) {
    _event.returnValue = false;
    if (_event.preventDefault) _event.preventDefault();
  }
}

The regular expression I made was /[0-9]|\(|\)|\-/. She considers numbers from 0 to 9, parentheses and hyphens.

Pay attention to the Event.preventDefault, because it is he who cancels the Keypress event, when some key was rejected by the regular expression.