JSFiddle - React, Tailwind, and code Playground

HTML

<input class="form-control valid" id="field" name="search" placeholder="Search" type="text">

<input type="text" name="phone" id="phone" 
onkeydown="mask(event,this)" onkeyup="mask(event,this)" 
maxlength="12" />

JavaScript

<!-- $("#field").keypress(function(){
  console.log($(this).val().replace(/[^0-9]/g, '').replace(/(\d{3})(\d{3})(\d{4})/,'('+'$1'+')'+'$2'+'-'+'$3'));
  
  
});
 -->

<script type="text/javascript">
function mask(e,f){
	var len = f.value.length;
	var key = whichKey(e);
	if(key>47 && key<58)
	{
		if( len==3 )f.value=f.value+'-'
		else if(len==7 )f.value=f.value+'-'
		else f.value=f.value;
	}
	else{
		f.value = f.value.replace(/[^0-9-]/,'')
		f.value = f.value.replace('--','-')
	}
}
 
function whichKey(e) {
	var code;
	if (!e) var e = window.event;
	if (e.keyCode) code = e.keyCode;
	else if (e.which) code = e.which;
	return code
//	return String.fromCharCode(code);
}
 
</script>