Jelly Bean WebView 不适用于文本框的 HTML maxlength 属性

Posted 2023-04-15

【中文标题】Jelly Bean WebView 不适用于文本框的 HTML maxlength 属性

【英文标题】：Jelly Bean WebView not working well with HTML maxlength attribute for text box

【发布时间】：2012-07-30 01:45:40

【问题描述】：

Jelly Bean 似乎不喜欢 html 的 maxlength 属性用于文本输入。它当然会限制输入字符的数量，但是当您尝试输入超出允许的字符数时，文本框就会失败。现在您将无法在任何其他文本框中输入内容，也无法删除该文本框中已输入的字符。

如果您还没有遇到过这个问题，那么请自己在一个简单的 HTML 上尝试一下并检查一下。如果您有任何解决此问题的线索，请告诉我。

【问题讨论】：

P.S.：这发生在 android 的 webview 中

【参考方案1】：

我的应用也遇到了同样的问题

现在我已经用 js 处理了它，它从输入文本和 textarea 中删除了所有 maxlength 属性，并阻止用户输入超过所需文本的内容。这里假设所有输入的文本和文本区域都有唯一的id。

代码也可以在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));
                    
                
            );
        
    );​

这个问题的bug已经在35264打开了

【讨论】：

我在上面的代码中添加了 rahul 的建议。此外，如果您希望此代码仅适用于 Jelly bean，您可以将此代码放在下面 if block ` var ver = window.navigator.appVersion; ver = ver.toLowerCase(); if ( ver.indexOf("android 4.1") >= 0 ) //这里需要的代码 `

【参考方案2】：

如果您的情况非常简单，那么在您的 html 行中添加一个简单的内容也可以，如下所示：

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

【讨论】：

这只是一个例子，假设您在一个字段中最多需要 10 个字符，可能在电话号码中。字段

这在手机和ios上都不起作用

【参考方案3】：

在 android Manifest 文件中提供权限为 WRITE_EXTERNAL_STORAGE"。

现在我的 android 4.1.2 正在接受输入类型号 7。

【参考方案4】：

我打开了以下 android 问题：35823。如果您遇到此问题，请加注星标，以便引起注意和解决。

【参考方案5】：

这肯定是开发者的噩梦错误 :) 直到你意识到根本原因并感受到“啊哈……”的时刻。 仅供参考：即使 DOM 中的所有输入字段都因为这个错误而冻结，我仍然能够使用 javascript 操作和更改输入字段的值。

【讨论】：

是的，通过js，你可以随时这样做。只是 DOM 停止监听用户的触摸事件。

【参考方案6】：

为需要限制最大长度的输入字段单独处理按键，方法是添加单独的类并监听该类的按键。

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