JSFiddle - React, Tailwind, and code Playground

by Pavel Volyntsev

HTML

onKeyPress
<input type="text" id="myText1"/>
<br/>
onKeyUp
<input type="text" id="myText2"/>
<br/>
onChange
<input type="text" id="myText3"/>

CSS

body{
  width:100%; height:100em;
  background:linear-gradient(31deg,#69f0ae , #00b0ff , #3f51b5);
}

input{
  text-align:center;
  width: 200px;
}

JavaScript

// смотри пример https://learn.javascript.ru/keyboard-events

// вернуть символ нажатой клавиши
function getChar(event) {
  return String.fromCharCode(event.keyCode || event.charCode);
}

// привязка обработчика на нажание кнопки в поле myText1
document.getElementById('myText1').onkeypress = function(e) {
    // спец. сочетание - не обрабатываем
    if (e.ctrlKey || e.altKey || e.metaKey) return true;

		// из символов оставляем только допустимые
    var char = getChar(e);
    if (char.match(/[^\d,]/))
    	return false;

    return true;
};

// привязка обработчика на отпускание кнопки в поле myText1
document.getElementById('myText2').onkeyup = function(e) {
  var obj = this;
	obj.value = obj.value.replace(/[^\d,]/g, '');
};


// привязка обработчика на изменение поля myText3
document.getElementById('myText3').onchange = function() {
  var obj = this;
	obj.value = obj.value.replace(/[^\d,]/g, '');
};

//var reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;

//var str='...a dd <a test="<>" href="#">... <b>...';

//alert( str.match(reg) );