Phonegap - input type email maxlength is not working

Question

This issue is on Phonegap. I want to apply the maxlength on an input box. But in the input box of the email type maxlength does not work. (In the other type, such as password type or tel type works well.) Of course, it works well on the web. The issue only occurs Phonegap. Why Do you know?

My code

<input type="email" data-role="none" placeholder="ID" maxlength="20"/>

+) I found this question but did not give me an answer. And attr('maxlength','5') is can't help me too..

EDIT

I found this question. and tasted both 4.2 version, 4.4.2 version. This issue certainly does not work only on the 4.4.2 version of the device.

SOLVED

To see the answers, I was trying to solve by using the following code:

var eInput = document.getElementById('Email-input');
var maxLength = eInput.maxLength;
eInput.onkeyup = function(e){
    if( eInput.value.length > maxLength  ){
        eInput.value = eInput.value.substring(0, maxLength );
    }
};

However, if I use this code should try more delete button of keyboard when try to erase after enter exceeds maxlength. And the answer of this bug was found in this link. The need to complete the word using spaces or focus out, than properly cleared. (The issue occurs only on some versions. - I think maybe 4.4.2 or higher..)

So I use this code:

eInput.value += '&nbsp';

And it works Perfectly!

All code:

var eInput = document.getElementById('Email-input');
var maxLength = eInput.maxLength;
eInput.onkeyup = function(e){
    if(eInput.value.length > maxLength){
        eInput.value += '&nbsp';
        eInput.value = eInput.value.substring(0, maxLength);
    }
};

which phonegap version are you working on? which phones have you tested your code on? — frank, Mar 02 '15 at 07:11

Dmitrij Holkin · Accepted Answer · 2015-03-02T08:23:18.637

3

var eInput = document.getElementById('Email-input');
var maxLength = eInput.maxLength;
eInput.onkeyup = function(e){
    if( eInput.value.length > maxLength  ){
        eInput.value = eInput.value.substring(0, maxLength );
    }
};

or

<input type="email" onKeyDown="if(this.value.length==10) this.value = this.value.slice(0, -1);">

or You can try this trick

<input type="email" name="email" pattern=".{6,10}" title="Six or less 10 characters">

Maybe try jquery then

look it is work

edited Mar 02 '15 at 08:23

answered Mar 02 '15 at 07:14

Dmitrij Holkin

1,995
3
39
86

The first approach is should try more delete button of keyboard when try to erase. after enter exceeds maxlength. And second approach is not work for me.. But really thanks :) ! – Soyeon Kim Mar 02 '15 at 07:29
`pattern` helps in a way that cut character exceeds the maxlength when focus out. But I want to character exceeds the maxlength are invisible during input. – Soyeon Kim Mar 02 '15 at 08:03
Using 'onKeyup' instead of 'onKeydown' helped me. `onKeyup="if(this.value.length==9) this.value = this.value.slice(0, -1);` – GokulaKrishnanM Apr 19 '17 at 11:18

score 1 · Answer 2 · edited May 23 '17 at 12:25

It seems an bug with android 4.1.2? So can you try any other android versions or not? Also, do you have the same problem (after hitting the max-input value, not able to do anything anymore in the form)?

What you could try is write some javascript suggested by an comment on the google android forums

I, too, spent days finding the exact cause. I found a solution as well: you need to bind to the keypress event (haven't tried with keyup or keydown, but that might work as well) and remove the maxlength attribute. Our solution was to add a data-xxx attribute and control the length within the event handler. We were already doing that, but as long as the maxlength is there and too many keystrokes are entered, it locks key input: Not just on the page, but the whole window (I navigated, in the same window, to Google and couldn't enter keystrokes).

So you're looking for some code that looks like this: (Credits goes to @sreekumar-sh )

HTML:

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

JS:

$(".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();
        }
    }
});

An another (more simple) solution could be something like this:

<input type="text" onKeyDown="if(this.value.length==8) this.value = this.value.slice(0, -1);">

The first way is to work a bit strange. The input is made possible in excess of the maxlength or not more input than a certain length when input fast, and input well after one second. (Of course, more than the maxlength.) But very thanks. — Soyeon Kim, Mar 02 '15 at 07:39

score 0 · Answer 3 · answered Apr 20 '17 at 06:05

You can handle both typing and pasting using the following code

HTML:

`onpaste="limitInput(this, 150)" onKeyup="limitInput(this, 150)"`

JavaScript:

`function limitInput(element, maxValue) {
     setTimeout(function() {
         if (element.value.length > maxValue) {
             element.value = element.value.slice(0, maxValue);
         }
     }, 100);
}`

Phonegap - input type email maxlength is not working

SOLVED

3 Answers3