How can I restrict form input to specific characters with a regex?-CodePudding

I have a made a regex for user to only allow these characters to be input. If user writes for example '@' it should not allow it, but in my code if user press @ and than press the tab the '@' still remains there.

function onlyAlphabet(inputVal) {
  var patt = /^[a-zA-Z.123456789] $/;
  
  if (patt.test(inputVal)) {
    document.getElementById('facebook').value = inputVal;
  } else {
    var txt = inputVal.slice(0, -1);
    document.getElementById('facebook').value = txt;
  }
}

<div >
  <label for="exampleFormControlTextarea1"  id="text-color1">Facebook</label>
  <input type="text" placeholder="Facebook" onkeypress="onlyAlphabet(value)" id="facebook"  name="facebook" value="<?php echo $row['facebook'] ?>" style="padding-left: 0 !important; border: none; border-bottom: 1px solid #E8E8E8; border-radius: 0 !important;">
</div>

CodePudding user response：

You should add onchange="onlyAlphabet(value)" and onblur="onlyAlphabet(value)" to make sure it would be called in any circumstances

CodePudding user response：

Must set oninput instead of onkeypress

CodePudding user response：

you could do it using any of these 3 ways -

1. onChange="onlyAlphabet(value)" - when the value of the input changes
1. onKeyUp="onlyAlphabet(value)" - or onKeyDown, when a key is released/pressed
1. onBlur="onlyAlphabet(value)" - when the focus leaves the input...