javascript - Angular Directive(指令) : get input type ="number" value on keypress

Question

我正在尝试获取按键时输入字段的当前值。

我的代码:

var app=angular.module('app',[]).controller('Ctrl', function($scope){})
.directive('decimalPlaces', function() {
  return {
    link: function(scope, ele, attrs) {
      ele.bind('keypress', function(e) {
        var key = e.which || e.keyCode || 0;
        var oldVal = this.value;
        console.log(key, oldVal);
      });
    }
  };
});

这是一个Fiddle :

我的问题是该示例适用于 Chrome V46.0.2490.80，但不适用于 Firefox V41.0.2(我使用的是 OS X V10.9.5)。

这就是 Chrome 中发生的情况:

• 我按“1”-> oldVal=""
• 我按“。” -> oldVal="1"
• 我按“2”-> oldVal="1。"

这就是 Firefox 中发生的情况:

• 我按“1”-> oldVal=""
• 我按“。” -> oldVal="1"
• 我按“2” -> oldVal=""<-- ???

我做错了什么吗？

Answer 1

这是因为浏览器对 type="number"的解释不同。

因此我建议使用 input type="text"并编写一些代码来删除错误的字符。

在您输入“11”时的情况。存在验证错误(type=“number”添加数字验证器)。当出现验证错误时，模型不会获得该值。

为了证明这一点，我根据你的 fiddle 创建了 fiddle (我添加了表单 - 因为它可以处理输入错误，并且我在表单中打印错误)Fiddle

输入 Firefox 11。

有时我创建模块 - 尝试演示 http://htmlpreview.github.io/?https://github.com/uhlryk/angular-dynamic-number/blob/master/examples/index.html 和模块链接:https://github.com/uhlryk/angular-dynamic-number 它可能并不完美，可能存在问题，但它可以提供很多帮助