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 class="form-group mb-3">
<label for="exampleFormControlTextarea1" class="fw-bold my-1 fs-7" id="text-color1">Facebook</label>
<input type="text" placeholder="Facebook" onkeypress="onlyAlphabet(value)" id="facebook" class="form-control" name="facebook" value="<?php echo $row['facebook'] ?>" style="padding-left: 0 !important; border: none; border-bottom: 1px solid #E8E8E8; border-radius: 0 !important;">
</div>You should add onchange="onlyAlphabet(value)" and onblur="onlyAlphabet(value)" to make sure it would be called in any circumstances
you could do it using any of these 3 ways -
onChange="onlyAlphabet(value)" - when the value of the input changesonKeyUp="onlyAlphabet(value)" - or onKeyDown, when a key is released/pressedonBlur="onlyAlphabet(value)" - when the focus leaves the input...Must set oninput instead of onkeypress