How to remove characters when user is typing in javascript

Question

i am validating an input box value so that it should contain only digit,.,-,/ if at any time user type any thing accept allowed character, then only that character should get removed.

ex. if i typed initially 12/12/ then a, then only a should get removed from text box not whole string 12/12.

what i have tried so far.-

<input type="text" onkeyup="isValidDate(this);"/>
function isValidDate(f){ 
    var re =/^[\d\/\.-]+$/;
   if (!re.test(f.value)) { 
    alert("called");
    f.value = f.value.replace(/^[\d\/\.-]+$/g,"");
   }
 }

i am getting alert but un wanted value is not getting removed.

How i can do this using java script?

Check out this very popular question here: [HTML Text Input allow only Numeric input](http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — DOK, Jan 18 '12 at 18:36

kwelch · Accepted Answer · 2012-01-18T18:40:34.090

You should be able to add a return in front of the function call.

Then in the javascript return false if the character is unwanted.

Here is what I would do below.

<input type="text" onkeyup="return isValidDate(this);"/>
function isValidDate(f){ 
    var re =/^[\d\/\.-]+$/;
   if (!re.test(f.value)) { 
    alert("called");
//if you need to add a value instead that can also be done here
return false;
   }
 }

Here is code that I used to check that the key press was either a number or the decimal. It also alerts the user by setting the label field that is passed.

<input id='txtUPT' name='UPT' type='text' style='width: 70px' onKeyPress="return NumbersOnly(event, 'lblStatusUPT')">
<label id='lblStatusUPT' class='status'></label>
    function NumbersOnly(evt, label) {
        var status = document.getElementById(label);
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode == 46) {
            return true;
        }
        if (charCode < 48 || charCode > 57) {
            status.innerHTML = 'Numbers Only Please';
            return false;
        }
        status.innerHTML = '';
        return true;
    }

I added in the code. I also added a function I have used for numbers only just to show the capabilities of checking based on the key pressed. — kwelch, Jan 18 '12 at 18:39
Whenever you use the ternary operator and the thing on the `y` here `x=(y)?y:z` repeats, you should be able to safely use `x=y||z` (if I am not wrong) — ajax333221, Jan 18 '12 at 18:46

score 1 · Answer 2 · answered Jan 18 '12 at 18:34

1

if(!$("#myform").validate().element( "#myselect" )) //Delete the character

answered Jan 18 '12 at 18:34

score 0 · Answer 3 · answered Jan 18 '12 at 18:40

0

Use validation on event's keyCode instead:

http://www.mredkj.com/tutorials/validate.html

http://kaushalparik.wordpress.com/2009/05/05/onkeypress-event-eventkeycode-and-eventwhich-validating-for-numarics/

answered Jan 18 '12 at 18:40

Ricardo Bin

887
6
12

score -1 · Answer 4 · edited Dec 20 '21 at 08:06

-1

Why don't you try a cleaner solution that uses regular expressions?!

<input type="text" onkeyup="this.value=this.value.replace(/[Search Expression]/flag,'New String');" \/>

This solution prevents the user from typing a value outside the pattern established by the regex.

Example: To remove all the numbers from "name" field:

onkeyup="this.value=this.value.replace(/[\d]/g, '');"

edited Dec 20 '21 at 08:06

Spankied

1,626
13
21

answered Dec 19 '21 at 20:38

Robson Oliveira

11
3

Maybe the best event to attach this regex would be "onChange", because it prevents the user from bypassing "onKeyUp" (likewise "OnKeyDown", both keyboard raised events) with context menu ("right click"). – statosdotcom May 28 '22 at 15:43

How to remove characters when user is typing in javascript

4 Answers4