【问题标题】:Phonegap - input type email maxlength is not workingPhonegap - 输入类型电子邮件最大长度不起作用
【发布时间】:2015-03-02 07:02:04
【问题描述】:

此问题与 Phonegap 有关。我想在输入框上应用最大长度。但是在电子邮件类型的输入框中,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 );
    }
};

但是,如果我使用此代码,在输入超过最大长度后尝试擦除时,应该尝试更多的键盘删除按钮。这个错误的答案是在这个link 中找到的。需要使用空格或焦点来完成单词,而不是正确清除。 (该问题仅出现在某些版本上。-我认为可能是 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);
    }
};

【问题讨论】:

  • 您正在开发哪个 phonegap 版本?你在哪些手机上测试过你的代码?

标签: javascript html cordova


【解决方案1】:
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

【讨论】:

  • 第一种方法是在尝试擦除时应该尝试更多的键盘删除按钮。输入后超过最大长度。第二种方法对我不起作用..但真的谢谢:)!
  • pattern 有助于在聚焦时剪切字符超过最大长度。但是我想超过最大长度的字符在输入过程中是不可见的。
  • 使用 'onKeyup' 而不是 'onKeydown' 对我有帮助。 onKeyup="if(this.value.length==9) this.value = this.value.slice(0, -1);
【解决方案2】:

这似乎是 android 4.1.2 的错误?那么您可以尝试任何其他Android版本吗?另外,您是否有同样的问题(在达到最大输入值后,无法在表单中执行任何操作)?

你可以尝试写一些an comment on the google android forums建议的javascript

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

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

【讨论】:

  • 第一种方式工作有点奇怪。当输入快速时,输入可能超过最大长度或不超过一定长度,并且在一秒钟后输入良好。 (当然,超过 maxlength。)但是非常感谢。
【解决方案3】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-02-09
    • 2016-08-06
    • 1970-01-01
    • 1970-01-01
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 2015-07-16
    相关资源
    最近更新 更多