remove character from input field while user is typing (keyup)

Question

I'm looking for a js or jq way to remove # character while user is typing on a field.

I tried this:

$( function() {
    $( ".remove-sharp" ).on( "keyup", function( event ) {
        console.log( 'test' );
        $( this ).val().replace( /\#/, "" );
    } )
} );

I can see the "test" being printed in console but this has no effect on the characters in the field; it doesn't remove #. How to achieve this ?

possible duplicate of [remove char when user is typing](http://stackoverflow.com/questions/36115013/automatically-delete-certain-characters-from-input-box-while-user-is-typing). — Felix Haeberle, Apr 24 '17 at 14:49

Rory McCrossan · Accepted Answer · 2017-04-25T08:14:28.360

14

The issue is because you're not setting the value of the input, only getting it and making the replacement and doing nothing with the resulting string. Try this:

$(function() {
  $(".remove-sharp").on("keyup", function(event) {
    var value = $(this).val();
    if (value.indexOf('#') != -1) {
      $(this).val(value.replace(/\#/g, ""));
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="remove-sharp" />

edited Apr 25 '17 at 08:14

answered Apr 24 '17 at 14:48

Rory McCrossan

331,213
40
305
339

1

try to hold the # button on the keyboard – Cr1xus Apr 24 '17 at 15:03
what does 'g' stand for? – Cr1xus Apr 24 '17 at 15:04
1

Global. It applies the replacement on all instances of `#` in the string, not just the first – Rory McCrossan Apr 24 '17 at 15:05
it's weird I can't use the arrow to move a character backward. Even a non '#' character. – Robert Brax Apr 25 '17 at 08:10
That's because the logic always updates the value, hence the cursor is placed at the end. I update the logic to only update the value if a `#` is present so you can use the cursor agin now – Rory McCrossan Apr 25 '17 at 08:15
This can be used to fix XSS – Balram Singh Mar 26 '20 at 05:19
@BalramSingh no, not at all. This can easily be worked around. All XSS detection needs to be done on the server, not the client – Rory McCrossan Mar 26 '20 at 08:07

score 1 · Answer 2 · edited Aug 13 '20 at 17:10

function validateCustomerName(){
    var validatedName = "";
    var restrictedCharactersArray = ["0","1","2","3","4","5","6","7","8","9","~","`","!","@","#","$","%","^","&","*","(",")","-","_",
        "+","=","{","}","[","]",":",";","'","<",">",",",".","?","/","/\/","|"];
    var customerName = document.getElementById("customerName").value;
    var numberValidation = (/^[a-zA-Z_ ]+$/g).test(customerName);
    if(!numberValidation){
        validatedName = "";
        var customerNameArray = customerName.split("");
        for(var i=0;i<restrictedCharactersArray.length;i++){
            var restrictedCharacter = restrictedCharactersArray[i];
            if(customerNameArray.indexOf(restrictedCharacter) !== -1){
                for(var j=0; j<customerNameArray.length; j++){
                    var customerNameCharacter = customerNameArray[j];
                    if(customerNameCharacter !== restrictedCharacter){
                        validatedName = validatedName+customerNameCharacter;
                    }
                }
            }
        }
        document.getElementById("customerName").value = validatedName;
    }
}

<input type="text" id="customerName" onKeyUp="validateCustomerName();" />

remove character from input field while user is typing (keyup)

2 Answers2