Question

我想限制用户在Android设备的数字字段中输入特殊字符。＆＃34;。＆＃34; （点）字符没有在＆＃34; onkeypress＆＃34;中传递值。事件，正如所料。

使用<input type="text">，我可以阻止用户输入任何特殊字符。

但是<input type="number"/>我无法限制用户输入点密钥。

尝试了很多堆栈溢出帖子。但仍然没有运气。

以下是我正在尝试的代码：

HTML

<input type="number" ng-model="registrationField.mobilenumber" tabindex="0" no-special-character="^[0-9-]*$" >

JS

app.directive("noSpecialCharacter", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var regex = RegExp(attrs.noSpecialCharacter);
            angular.element(elem).on("keydown", function(e) {
                if(e.key == "Unidentified"){
                    e.preventDefault();
                    return false;
                }
            });
        }
    }
}])

我正在使用keydown事件，因为数字键盘上的点按键不会触发keypress事件。

此外，当用户输入点密钥时，我收到e.key为Unidentified。所以我试图用它来操纵。

我尝试在用户输入点密钥时修剪最后一个值，但也无效。

请建议任何可能的方式。

在Android Nexus 5X设备中尝试了上述代码。

Answer 1

嗯，我知道这是一个糟糕的解决方案，因为它使用$timeout服务，但至少在整天打了这个之后的任何事情......

首先将类型设置为type="tel"（不知道原因，但同样不适用于type="number"）注册变更事件：

<input type="tel" ng-model="$ctrl.numberField" ng-change="$ctrl.onChange()" />

然后在你的控制器中注入角度$timeout服务并定义onChange()函数：

onChange() {
    // the below code is relevant for Android platform in cordova
    if (typeof cordova != 'undefined' && cordova.platformId == "android") {
        // filter all available input characters in Android NumPad mode
        var r = new RegExp("[#/;,N\(\)\.\*\-]");
        if (r.test(this.data)) {
            // perform the filter after the digest cycle of angular is complete
            this.$timeout(() => {
                this.data = this.data.replace(r, "");
          }, 100);
     }
}

您在RegExp对象中看到的所有奇怪字符都是Android可以置于其键盘的NumberPad状态的字符。

希望它有所帮助！

Answer 2

修改我没有正确理解问题，这个解决方案不适用于移动设备，这是输入字段的简单javascript解决方案。

<div> <input onkeypress='return event.charCode >= 48 && event.charCode <= 57' type="number" placeholder="Input Value" /> </div>

这是jsfiddle http://jsfiddle.net/tZPg4/16784/

Answer 3

这是一个使用输入数字，jQuery和setTimeout的解决方法：

<input type="number" name="test" inputmode="numeric" pattern="[0-9]*" step="1" class="only-numbers" />


$(document).on('keydown', '.only-numbers', function (e) {
    var inputElement = $(this);
    if (e.which < 48 || e.which > 57) {
        window.setTimeout(function () {
            inputElement.attr('type', 'text').attr('type', 'number');
        }, 100);
    }
});

如果它没有工作，您可能需要调整setTimeout延迟。

我希望它可以帮助那些有同样恼人问题的人。

限制用户在Android

3 个答案: