automatically delete certain characters from input box while user is typing

Question

I am trying to validate a form and the input box I'm working on should only consist of numbers. If a user starts typing any letters I want them to automatically delete and obviously if they type numbers it shouldn't delete.

here is my js:

var defaultValue = 10; 

$(document).ready(function() {

      $('#donation-amount').keyup(function() {
      if($(this).val()) {
         $('#display-amount').text($(this).val());
    } else {
        $('#display-amount').text(defaultValue);
       $("#default").addClass('active');
       $("#btn2").removeClass('active');
       $("#btn3").removeClass('active');
    }
        if (isNaN( $(this).val() )) {
        console.log("false")
        } else {
        console.log("true")
        }

      });
     $( ".selectvalue" ).click(function() {
        $('#display-amount').text($(this).val());
     });

    $(".buttons .btn").click(function(){
        $(".buttons .btn").removeClass('active');
        $(this).toggleClass('active'); 
    });
    $('#display-amount').text($('#default').val());

});

and here is my html:

 <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">

any help is appreciated!

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Instead of deleting non-numeric characters, just ignore them in the first place, or define the input type as number.

HTML Text Input allow only Numeric input

edited May 23 '17 at 11:59

Community

1
1

answered Mar 20 '16 at 14:45

Itai Bar-Haim

1,686
16
40

score 0 · Answer 2 · answered Mar 20 '16 at 14:44

0

You want this ? See this fiddle

var defaultValue = 10; 

$(document).ready(function() {
      $('#donation-amount').keyup(function() {
        // check if numbers are type
        var reg = /^\d+$/;
        if(reg.test($(this).val())) {
          $('#donation-amount').val($(this).val());
            } else {
         $('#donation-amount').val(defaultValue);

            }      
      });
});

answered Mar 20 '16 at 14:44

Vincent G

8,547
1
18
36

this is great! but do you know how I get the value back into the input box instead of the 10 if a user types letters the 10 appears and I want Custom to appear and when I try and delete it it won't let me – avasssso Mar 20 '16 at 15:02
Sorry I don't understand what you exactly wants. Can you precise it ? – Vincent G Mar 20 '16 at 15:21
yeah. so when I type a number in the input field it displays fine but when I type a letter, the default value I have set of 10 var defaultValue = 10; appears in the input box and when I try to delete the 10 it doesn't delete. instead of 10 showing up I would like the value of my input box to appear instead. value="Custom Hopefully this was explained better – avasssso Mar 20 '16 at 15:31
It works fine, but I also want to allow alphabetical characters and dot? – Sri Dec 24 '19 at 09:50
How could i customize it – Sri Dec 24 '19 at 09:51

score 0 · Answer 3 · answered Mar 20 '16 at 14:54

You may want to take advantage of HTML5's <input type="number">. However, if that doesn't work for your situation or isn't desirable you may want to try using jQuery's keydown() function.

HTML

<input id="inputField" type="text">

jQuery

$(function () {
    $("#inputField").keydown(function (e) {
        if (e.which != 0 && e.which != 8 && (e.which < 48 || e.which > 57)) {
            $("#quantity").html('').append();
        }
    });
});

This checks that keys firing the event are numeric and within the numeric keys assignment range. If the keys firing the event do not match these conditions then no output is given. However, if the input qualifies as within the numeric range it will be added (append()) to the input field itself.

It is worth noting that this can be achieved using standard JavaScript: window.addEventListener('keydown', function (e) {});

automatically delete certain characters from input box while user is typing

3 Answers3

Linked