限制用户在 Android 上的输入字段中输入时间答案

【问题标题】：Restrict the user entering period in input field on Android限制用户在 Android 上的输入字段中输入时间
【发布时间】：2016-11-22 13:12:15
【问题描述】：

我想限制用户在 Android 设备上的数字字段中输入特殊字符。这 ”。” （点）字符没有像预期的那样在“onkeypress”事件中传递值。

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

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

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

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

HTML

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

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 设备中尝试了上述代码。

【问题讨论】：

如果您尝试对电话号码进行输入验证，请不要尝试使用input[type=number]。它的意思是实际数字。然后尝试改用输入掩码
@Eddi 我明白了。但客户只想使用数字键盘。有没有其他的实现方式？
你试过输入type=tel吗？

标签： javascript android angularjs cordova

【解决方案1】：

好吧，我知道这是一个糟糕的解决方案，因为它使用了 $timeout 服务，但至少在与此斗争了一整天之后……

首先将类型设置为type="tel"（不知道为什么但同样不适用于type="number"）注册on-change事件：

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

然后在您的控制器中注入 angular $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 状态中的字符。

希望它对某人有所帮助！

【讨论】：

【解决方案2】：

编辑： 我没有正确理解问题，此解决方案不适用于移动设备，这是输入字段的纯 javascript 解决方案。

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

这是工作的 jsfiddle http://jsfiddle.net/tZPg4/16784/

【讨论】：

以上答案在小提琴中运行良好。但正如我在问题中提到的，当我从 android 设备中的数字键盘输入点键时，不会触发 keypress 事件。
实际上，虽然您确实声明问题出在 Android 上；在问题中不清楚“Android dot key”是您遇到问题的行为。
答案不回答问题。问题是关于在 Android 中输入句点/点号，而答案对它不起作用。 Fiddle 不相关，因为答案应在 Android 环境中进行测试。
是的，这是真的，我的问题是我没有正确理解问题，我编辑了我的答案。

【解决方案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 不起作用，您可能需要调整它。

希望对遇到同样烦人问题的人有所帮助。

【讨论】：