Jelly Bean WebView not working well with HTML maxlength attribute for text box

Question

Jelly Bean doesn't seem to like the maxlength attribute of HTML for text input. It certainly restricts the number of input characters but the moment you attempt to type beyond the allowed number of character, the text box fails. Now you won't be able to type in any other text boxes and nor will you be able to delete the already input character, in that text box.

If you haven't already faced this, then try it yourself on a simple HTML and check. Please tell me if you have any clue for solving this.

P.S.: this happens in android's webview – Rahul Dole Aug 01 '12 at 09:33 — Rahul Dole, Aug 01 '12 at 09:33

score 20 · Accepted Answer · edited Oct 15 '12 at 19:16

I have also experienced the same problem in my app

for now I have handled it with js, which removes all maxlength attributes from input text and textarea and stops user from inputing more than the required text. Here it is assumed that all input text and textarea have unique id.

Code is also available at jsfiddle

    $(document).ready(function () {

        var ver = window.navigator.appVersion;
            ver = ver.toLowerCase();

        if ( ver.indexOf("android 4.1") >= 0 ){            

            var idMaxLengthMap = {};

            //loop through all input-text and textarea element
            $.each($(':text, textarea, :password'), function () {
                var id = $(this).attr('id'),
                    maxlength = $(this).attr('maxlength');

                //element should have id and maxlength attribute
                if ((typeof id !== 'undefined') && (typeof maxlength !== 'undefined')) {
                    idMaxLengthMap[id] = maxlength;

                    //remove maxlength attribute from element
                    $(this).removeAttr('maxlength');

                    //replace maxlength attribute with onkeypress event
                    $(this).attr('onkeypress','if(this.value.length >= maxlength ) return false;');
                }
            });

            //bind onchange & onkeyup events
            //This events prevents user from pasting text with length more then maxlength
            $(':text, textarea, :password').bind('change keyup', function () {
                var id = $(this).attr('id'),
                    maxlength = '';
                if (typeof id !== 'undefined' && idMaxLengthMap.hasOwnProperty(id)) {
                    maxlength = idMaxLengthMap[id];
                    if ($(this).val().length > maxlength) {

                        //remove extra text which is more then maxlength
                        $(this).val($(this).val().slice(0, maxlength));
                    }
                }
            });
        }
    });

The bug for this issue was already opened at 35264

I have added rahul's suggestion in above code. Also if you want that this code should run only for Jelly bean you can put this code in below if block ` var ver = window.navigator.appVersion; ver = ver.toLowerCase(); if ( ver.indexOf("android 4.1") >= 0 ) { //required code here }` — Keval Malde, Aug 03 '12 at 06:55

Rahul Dole · Answer 2 · 2012-08-02T05:31:15.573

6

if your case is very simple then a simple addition in your html line can work too, like so:

<input type="text" class="abc" onkeypress="if(this.value.length > 9) return false;"/>

edited Aug 02 '12 at 05:31

answered Aug 02 '12 at 05:18

Rahul Dole

2,723
2
24
30

this is just an example, assuming you need max 10 characters in a field, maybe in a phone no. field – Rahul Dole Aug 02 '12 at 05:32
this doesn't work at all on mobile phones neither IOS – Simona Adriani Feb 04 '16 at 10:36

score 2 · Answer 3 · answered Jun 21 '13 at 10:50

2

Provide the permission as WRITE_EXTERNAL_STORAGE" in android Manifest file.

Now in my android 4.1.2 is working with acceptance of input type number 7.

answered Jun 21 '13 at 10:50

user2508691

21
1

score 1 · Answer 4 · answered Aug 01 '12 at 15:15

1

I opened the following android issue: 35823. If you are experiencing this issue please star it so that it can get some attention and resolved.

answered Aug 01 '12 at 15:15

Scott

1,263
1
12
23

score 1 · Answer 5 · answered Feb 12 '13 at 00:13

1

This certainly is a developer's nightmare bug :) Until you realize the root cause and feel the "ahaaa..." moment. FYI: Even though all the input fields in the DOM freeze because of this bug, I was still able to manipulate and change values of the input fields using Javascript.

answered Feb 12 '13 at 00:13

samdeV

2,158
2
11
12

yes through js, you can do that anytime. It's just that the DOM stops listening to touch events from user. – Rahul Dole Feb 12 '13 at 08:25

score 1 · Answer 6 · answered Aug 20 '14 at 11:29

Handle the keypress separately for input fields where you need to restrict the maxlength by adding a separate class and listen keypress for that class.

HTML

<textarea ng-model="model " rows="3" maxlength="100" cols="70" class="custom_txtarea ng-pristine ng-valid charlength" placeholder="Achievements"></textarea>

Javascript

$(".charlength").keypress(function(event) {
          if(event.which >= 32 || event.which == 13) {
          var maxLength = event.currentTarget.maxLength;
           var length = event.currentTarget.value.length;
           if(length >= maxLength) {                     
               event.preventDefault();
           }
       }
   });

Jelly Bean WebView not working well with HTML maxlength attribute for text box

6 Answers6

Linked