"How can I do that?"
You can do this using a regular expression containing the conditions you want, and testing such expression using javascript for such a character, but you must specify such specific words or symbols in your regex(regular expression) so that it can validate what is typed.
The expression you initially want can be interpreted this way:
var regex = /^[√\.0-9\/*\-+\()\√\π]*$/g;
Obs: as you did not specify if pi and root were to be represented in symbol or literal form, I used their respective symbols.
Functional example:
textInput = document.getElementById('textInput');
textInput.addEventListener("keydown", regularexp);
buttonPi = document.getElementById('pi');
buttonPi.addEventListener("click", inserePi);
buttonRaiz = document.getElementById('raiz');
buttonRaiz.addEventListener("click", insereRaiz);
// 0-9 / * - + ( ) raiz pi [^0-9/*-+()√¯π]
function regularexp(e){
console.log(e);
var txt = e.key;
console.log(txt);
var aryReservedKeys = [
8//backspace
,16//Shift
,17//Ctrl
,35//End
,36//Home
,37//ArrowLeft
,38//ArrowUp
,39//ArrowRight
,40//ArrowDown
,46//delete
];
var regex = /^[√\.0-9\/*\-+\()\√\π]*$/g;
var isReservedCharacter = (aryReservedKeys.indexOf(e.keyCode) != -1);
if( !regex.test(txt) && !(isReservedCharacter) ) {
console.log("Not Match");
var winEvent = e || window.event;
winEvent.preventDefault();
return false;
}else{
console.log("Match");
}
}
function inserePi(){ textInput.value += 'π'; }
function insereRaiz(){ textInput.value += '√'; }
input {
width: 100%;
}
<input id=textInput type=text value="((√31+50)-(45*55)+(5*5)/(√50*π))" />
<input id=pi type=button value="Inserir Pi" />
<input id=raiz type=button value="Inserir Raiz" />
Explanation
Note that I used a regex and added an event keydown listening to actions in the element <input id=textInput>
which verifies which character was typed by the user and discards it if it is not validated by the regular expression, ie it cancels the action.
Also, I added some reserved actions that may eventually be used by the user as exceptions, so that there is no loss of usability in their text field, as you can see such commented keys with their respective codes in the array aryReservedKeys.
As the individual codes of each symbol are usually not known, I have created two buttons that automatically insert at the end of the text field pi and the root.
Adding more symbols/words
Good to add a symbol is extremely simple, you should just add right after the last symbol validated by regex a backslash and then the desired symbol as for example:
\%
So the new regex would be arranged in this way:
var regex = /^[√\.0-9\/*\-+\()\√\π\%]*$/g;
Now for words, just write them exactly as they are in parentheses then getting this way, for example, let’s add the word wordTeste:
var regex = /^[√\.0-9\/*\-+\()\√\π*]*(palavraTeste)*$/g;
Extra
To find out which regular expressions are correct according to what you want to do, and to understand how regular expression works, use this site as reference, he is very good.