Appending value to textbox from javascript not working in Android default browser

Question

I am trying to implement phone no. masking for Mobile website. And I could not use jquery mask plugin as it was not working properly in devices. Below implementation is working fine in Android Chrome Mobile Browser. But in case of Android default browser, when I try to delete all numbers using backspace key, last some(2/3) numbers/digits are not clearing. I guess this.value += "-"; is not updating some textbox property. Phone No. Format is (ex. ###-###-####)

HTML

<input id="phoneNo" type="tel" maxlength="12" placeholder="Phone"/>

JavaScript

var phoneNo = document.getElementById("phoneNo");
phoneNo.addEventListener("textInput",function(){
if(this.value.toString().length==3 || this.value.toString().length==7) {
   this.value += "-";            
}
});

score 0 · Answer 1 · answered May 31 '13 at 12:10

0

Have a look at the jQuery on() method as not all browsers support addEventListener which I am guessing is what the problem is.

http://api.jquery.com/on/

answered May 31 '13 at 12:10

Gabriel Sadaka

1,748
1
15
19

score 0 · Answer 2 · answered May 31 '13 at 12:18

Mr. Darshan please have a look at http://jsfiddle.net/2dJAN/51/

In my app also i am using these kind feature. This example

Will allow the user to type only integers in field
This will automatically add the "-" between numbers like 123-456-7890 format

You can delete all the numbers inside the field.

$("#fax_field").on("keyup", function(event) {
        var limitField = $(this).val().trim().length;
        var limit = "12"
        this.value = this.value.replace(/[^0-9_\-\.]/g, '');
        if (event.keyCode != 8) {
          if (limitField == 3) {
            var fax_value = $(this).val().trim().concat('-');
            $("#fax_field").val(fax_value);
          } else if (limitField == 7) {
            var fax_value = $(this).val().trim().concat('-');
            $("#fax_field").val(fax_value);
          }
        }
        if (limitField > limit) {
            $("#fax_field").val($(this).val().trim().substring(0, limit));
        }
    });

Please try this. Let me know your comments.

Vinothini, In the above example. When you press keys very fast."-" will not appear. — Darshan, Jun 04 '13 at 05:22

Appending value to textbox from javascript not working in Android default browser

2 Answers2