Phonegap - 输入类型的电子邮件maxlength不起作用

时间:2015-03-02 07:02:05

标签: javascript html cordova

此问题在Phonegap上。我想在输入框上应用maxlength。但是在电子邮件类型的输入框中,maxlength不起作用。 (在另一种类型中,例如密码类型或电话类型效果很好。)当然,它在网络上运行良好。问题只发生在Phonegap上。你为什么知道?

我的代码

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

+)我找到this question但没有给我答案。 attr('maxlength','5')也无法帮助我。

修改

我找到了this question。并尝到了4.2版,4.4.2版。这个问题当然不适用于4.4.2版本的设备。

解决

要查看答案,我试图使用以下代码解决:

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

但是,如果我使用此代码,则在输入超过maxlength后尝试擦除时应尝试更多键盘删除按钮。在这个link中找到了这个bug的答案。需要使用空格或焦点完成单词,而不是正确清除。 (问题仅出现在某些版本上。 - 我认为可能是4.4.2或更高版本。)

所以我使用这段代码:

eInput.value += '&nbsp';

它完美无缺!

所有代码:

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

3 个答案:

答案 0 :(得分: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 );
    }
};

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

或者你可以尝试这个技巧

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

也许尝试jquery然后

look it is work

答案 1 :(得分:1)

这似乎是android 4.1.2的一个错误?你可以试试其他任何Android版本吗?此外,你有同样的问题(在达到最大输入值后,不能再在表格中做任何事情了吗?)

你可以尝试写一些由an comment on the google android forums

建议的javascript
  

我也花了好几天找到确切的原因。我也找到了一个解决方案:你需要绑定到keypress事件(没有尝试使用keyup或keydown,但这可能也可以)并删除maxlength属性。我们的解决方案是添加data-xxx属性并控制事件处理程序中的长度。我们已经这样做了,但是只要maxlength在那里并输入了太多的键击,它就会锁定键输入:不只是在页面上,而是整个窗口(我在同一个窗口中导航到Google并且不能'输入击键)。

所以你正在寻找一些看起来像这样的代码:(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();
        }
    }
});

另一个(更简单的)解决方案可能是这样的:

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

答案 2 :(得分:0)

您可以使用以下代码处理键入和粘贴

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