javascript - 具有数字格式的 Jquery keydown() 在 android webview 上无法正常工作-6ren

javascript - 具有数字格式的 Jquery keydown() 在 android webview 上无法正常工作

转载作者：行者123 更新时间：2023-11-28 03:38:47

25

4

我在 android 浏览器/webview 上遇到了一个奇怪的行为。我正在测试一个将自动格式化为电话号码格式“(xxx) xxx-xxxx”的输入。但是后来发生的事情是当我点击或按下机器人键盘上的任何数字时，第一个输入是这样的“(x”但是然后光标在“(”和“x”之间。有没有办法把光标放在后面“x”值？

我在 iPhone 和 Windows 网络浏览器上对此进行了测试，它运行良好。如果我的 jquery 或 javascripts 有错误，请告诉我。

谢谢

HTML 代码:

<html>
    <head> 
        <title>Sample Phone Number Format</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <input type="text" id="phone" /> 

        <script type="text/javascript">
            $('#phone').on('keydown', function (event) {

                objval = $(this).val();
                if (event.keyCode == 46 || event.keyCode == 8) {} else {
                    if (!((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || (objval.length > 13))) {
                        event.preventDefault();
                    } else {
                        if (objval.length == 0) {
                            $(this).val(objval + '(');
                            alert(objval + '(');
                        } else if (objval.length == 4) {
                            $(this).val(objval + ') ');
                            alert(objval + ') ');
                        } else if (objval.length == 9) {
                            $(this).val(objval + '-');
                            alert(objval + '-');
                        } else if (objval.length >= 14) {
                            if (event.keyCode == 9) {
                                return;
                            } else {
                                event.preventDefault();
                            }
                        }
                    }
                }
            });

            $('#phone').on('keydown', function (event) {

                var objVal = $(this).val();
                if(objVal.length < 14)
                {
                    validateCallerForm(objVal + String.fromCharCode((96 <= event.keyCode && event.keyCode <= 105)? event.keyCode-48 : event.keyCode));
                }
            });

            //Validates proper phone format, true if valid phone number, false otherwise
            function isValidPhoneNumber(elementValue) {
                var numberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
                return numberPattern.test(elementValue);
            }

            //validates entire caller form, also updates css classes for proper response
            function validateCallerForm(PhoneNumber) {

                if (isValidPhoneNumber(PhoneNumber)) {
                    alert("true");
                } else {
                    alert("false");
                }

            }
        </script>
    </body>
</html>

给予 +50 赏金给谁会正确回答这个问题

最佳答案

你必须首先像下面这样定义用于打字和复制粘贴的监听器(不是必需的):

$("#phone").keyup( function() {
    maskLine(this);
});
$("#phone").change( function() {
    maskLine(this);
});

然后，为了管理光标位置，您必须缓存以前的电话号码，然后，您可以比较差异并在需要时更新光标位置。所以声明，你必须像这样声明一个全局数组:

var _cacheElementValues = new Array();

最后，您可以检查下面的函数，它将您的掩码应用于电话号码字段并管理光标位置:

function maskLine( element ) {
    element = $(element);
    var maskedLine = '';
    var line = element.attr('value');

    // check the cache of the input and abord if no change since last treatment
    if (_cacheElementValues[element.attr('id')] != undefined && _cacheElementValues[element.attr('id')] == line) {
        return;
    }
    line = line.replace(/\D/g, ''); // remove all characters != digits
    line = line.substring(0, 10);
    if (line != '') {
        // apply mask
        if (line.length <= 2 ) {
            maskedLine = "(" + line;
        } else if (line.length < 6) {
            maskedLine = line.replace(/^([0-9]{3})([0-9]{0,3})/g, '($1) $2');
        } else {
            // mask : '(XXX) XXX-XXXX'
            maskedLine = line.replace(/^([0-9]{3})([0-9]{3})([0-9]{0,4})/g, '($1) $2-$3');
        }        
    }

    // define cursor position at the end of the input by default
    var pos = maskedLine.length;

    // Change cursor placement if necessary
    if (typeof element[0].selectionStart != 'undefined') {
        var start = element[0].selectionStart;
        var end   = element[0].selectionEnd;
        var insText = element[0].value.substring(start, end);

        // get current cursor placement
        if (insText.length == 0) {
            pos = start;
        } else {
            pos = start + insText.length;
        }

        // find how many digits typing since last mask application
        var previousLength = 0;
        if (_cacheElementValues[element.attr('id')] != undefined) {
            previousLength = _cacheElementValues[element.attr('id')].replace(/\s/g, '').length;
        }
        var diff = maskedLine.replace(/\s/g, '').length - previousLength;

        // if sum of new typing digit is > 0 : we change cursor placement
        if (diff > 0) {
            pos += (diff - 1) + Math.round((diff-1)/3);
            if (pos%6 == 0 && maskedLine.length >= pos+1) pos++;
        }
    }

    // update input data & cache
    element.val(maskedLine);
    _cacheElementValues[element.attr('id')] = maskedLine;

    // update cursor placement
    element[0].selectionStart = element[0].selectionEnd = pos;    
}

你可以在 jsFiddle 上找到这个例子:http://jsfiddle.net/UE9LB/5/

我希望这个小小的解释可以解决您的问题；)享受吧!

ps: 我为我糟糕的英语道歉:s

关于javascript - 具有数字格式的 Jquery keydown() 在 android webview 上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12541028/

25

4

0

文章推荐： javascript - 无法使用 Protractor 单击按钮

文章推荐： javascript - 如何使用 Gatsby 映射两次？

文章推荐： jQuery在PX中获取元素宽度

jQuery live keydown 在第二次 keydown 之前不会注册
我试图在用户开始输入后将类(.active)添加到文本字段。我让它在某种程度上与以下代码一起工作，但由于某种原因，当用户开始键入时，.active 类不会立即应用，它仅在键入第二个字母后才应用。有什么
jQuery keydown 事件绑定(bind) - live 与 keydown
在 Mac 的 Chrome、Safari 和 Opera 上，正文实时绑定(bind)和文档 keydown 绑定(bind)均有效 $(document).ready(function() {
javascript - 如何为整个文档启用 keydown 并为一个 div 禁用 keydown
我使用 fancybox 来弹出表单，我的客户不希望背景应该滚动 Firefox 仍然允许用户通过箭头键滚动背景。现在我阻止用户按箭头键直到弹出完整文档，但它也会停止我的表单中的相同按键。这些选项
c# - UserControl KeyDown 事件不会针对撤销 Windows 应用程序 KeyDown 事件而触发
我有 UserControl 并面临 KeyDown 事件的问题。我的 UserControls 将显示反对撤销 Windows 窗体 keydown 事件，如下所示: 用户控件的事件: privat
Javascript:Keydown 事件: "Up"箭头键阻止进一步的箭头键 Keydown 事件？ (回答:键盘重影)
我发现了很多相关问题(这里和其他地方)，但还没有具体找到这个问题。我正在尝试监听箭头键 (37-40) 的按键事件，但是当以特定顺序使用箭头键时，后续箭头不会生成“按键”事件。例子: http:/
javascript - $ ('form:not(.some-class)' ).keydown 仍在将 keydown 事件应用于 .some-class
JQuery 的“:not”选择器不会阻止要排除的类(装饰元素)触发 .keydown 事件。为什么？在以下代码中，当我按下 .newOwnerEntryInput 字段中的某个键时，我希望仅看到“
keydown - Vue Test Utils，测试中的 keyCode 不再触发 Keydown 事件
在测试环境中，将vue-test-utils更新到1.0.0-beta.26或更高版本后，keydown事件不再由keyCode触发，例如: Vue 脚本 public onKeydown
C#、WinForms : What would prevent KeyDown events from chaining up from focused control up to main Form? 只有叶控件 KeyDown 对我有用
据我了解，当按下键盘按钮时，它应该为具有焦点的控件调用 KeyDown 事件。然后，父控件的 KeyDown，依此类推，直到到达主窗体。除非 - 沿着链条，其中一个 EventHandlers 做了:
javascript - 当在 IE11 的 URL 字段中按下 Ctrl 时，jQuery keydown 处理程序接收 keydown 事件
在 IE11 中，触发 keydown 事件有一种奇怪的行为。请使用以下网址重现: http://jsfiddle.net/marbug/79dz6ajz/ 有一个带有两个输入字段的表单:
keydown - NSCollectionView 不会接受关键事件
我有一个带有 3 个 NSTableViews 和 1 个 NSCollectionView 的窗口。集合 View 显示图像。我希望能够选择其中一个图像并使用键盘删除键将其删除，但我无法让 coll
.net - 检测整个窗口的箭头键-KeyDown
我有一个WinForms表单(C#/。Net)，它包含一个PictureBox，MenuStrip，Panel和两个Button控件。我需要为整个窗口的箭头键检测KeyDown事件；即，当窗口位于前
JQuery 数据表 Keydown
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
JQuery .on ('keydown' ,...) 未触发新元素
我查看了一些相关问题，但没有一个能帮助我解决我的问题。我有自己的从头开始构建的动态数据网格表单，可以在其中添加/删除数据行和字段列等。我正在尝试提高可用性，以便按回车键将创建一个新的字段列并且给予重
macos - KeyDown 不起作用
我试图通过按下来执行特定操作，例如空格键(任何地方)。在我的代码中，我有 AcceptFirstResponder 方法和 keyDown 方法，但我没有收到 NSLog 消息代码如下: - (BO
javascript - keydown 事件仅在按下任何其他键后才起作用
我正在开发一个 Mozilla 插件，它将左侧的数字键替换为 Shift + 等效键。例如，如果您按 1，它将被替换为 '!'自动(特别适用于在线编译器)。这是代码 document.activeEl
javascript - keydown 时的表单验证
我的表单具有以下语义结构 Sign Up Username
Javascript keydown 操作对象
我正在尝试创建一个对象来处理用户的键盘输入。 var control = new Control (); function Control () { this.w = 0; this.
javascript - Keydown 事件不会触发函数
我编写了一个简单的代码，当按下某个键时，它应该改变框的可见性，但是出了问题，因为无论按下哪个按钮，它总是说它是错误的。这应该只有在按下“f”键时才有效，现在根本不起作用...... const br
Javascript for 循环不适用于函数 keydown
在我的代码中，用于提醒每个 keydown 事件上提交的所有文本区域行，但循环不起作用 function limitTextareaLine(e) { var textArray = $(this
Javascript keydown 事件仅在最多两个键时触发
我有一个用于捕获和注册箭头键输入的系统。它一直有效到一定程度。只要按下两个或更少的键，它就会正确记录同时按下多个键的情况。如果第三个或第四个按钮同时按下，它将停止触发按键事件。请参阅this jsFi

首页

博学

6Ren·AI

商城

javascript - 具有数字格式的 Jquery keydown() 在 android webview 上无法正常工作