automatically delete certain characters from input box while user is typing

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!

Answers


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);

            }      
      });
});

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


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) {});


Need Your Help

Fatal Error: Allowed Memory Size of 134217728 Bytes Exhausted (CodeIgniter + XML-RPC)

php codeigniter memory xml-rpc memory-limit

I have a bunch of client point of sale (POS) systems that periodically send new sales data to one centralized database, which stores the data into one big database for report generation.

Fast implementation binary exponentiation implementation in OpenCL

c opencl pow exponentiation modular-arithmetic

I've been trying to design a fast binary exponentiation implementation in OpenCL. My current implementation is very similar to the one in this book about pi.