Android Phone - Input field retaining every keypress and appending on replace

Question

Aim : Disallow numeric values on an input Field

Logic: I am trying to replace every numeric value with empty string. But on every next keypress, the original val string is prepended to it.

For example :

---------------------------------------------------------
Key Entered          |         Value reflected in Input
---------------------------------------------------------
A                    |                A
b                    |                Ab
1                    |                Ab
c                    |                AbAbc
----------------------------------------------------------

Code :

HTML

 <input id="charText" value="" class="alpha">

Script

$('.alpha').on('keyup', function () {

    //$(this).val( $(this).val().replace(/[^A-Za-z]/g,'') );
    $val = $(this).val().replace(/[^A-Za-z]/g,'');;
    $('.alpha').val($val);
    });
});

Works for desktop. Error only in my Android mobile

Have you tried other events like ``onchange`` or ``oninput``? I have found this post, it seems similiar to your problem: https://forum.jquery.com/topic/val-function-interweaving-new-value-with-old-value-on-android-s-nexus-s — Gonzalo, Feb 02 '18 at 07:26
the direction you gave helped me solve it..thank you very much — cosmoloc, Feb 02 '18 at 07:52

score 0 · Accepted Answer · answered Feb 02 '18 at 07:54

I was able to solve the same using following script (Ref : JavaScript keypress event not raised on Android browser)

$(window).load(function(){
    $('.alpha').on('keyup input', function (event) {

        if(event.type == 'input') {
          var bufferValue = $(this).val().replace(/[^A-Za-z]/g,'');
          $(this).val(bufferValue);
        }

    });
});

Android Phone - Input field retaining every keypress and appending on replace

1 Answers1