javascript - 三星键盘光标位置问题JS setSelectionRange

Question

此 Angular Directive(指令)会在数字输入字段中每三位数字自动插入逗号(例如“1000”变为“1,000”)。它在我测试过的所有浏览器中都能正确保留光标位置，但配备三星键盘的三星手机除外，例如运行 Android 7.0、三星体验版 8.1 的 Galaxy S8。

在三星上，如果我输入“1000”，则会插入逗号，并且我的光标最终会位于十位和个位之间，而实际上它应该一直位于右侧。

此问题有任何已知的修复方法吗？

angular.module('someWebApp')
  .directive('commaInput', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      var el = element[0];

      function clean(x) {
      while (x.toString().indexOf(",") != -1)
      {
        x = x.replace(",", "");
      }
      return x.replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }

      ngModelController.$parsers.push(function(val) {
        var cleaned = clean(val);

        // Avoid infinite loop of $setViewValue <-> $parsers
        if (cleaned === val) return val;

        var start = el.selectionStart + cleaned.length - val.length;
        var end = el.selectionEnd + cleaned.length - val.length;

        // element.val(cleaned) does not behave with
        // repeated invalid elements
        ngModelController.$setViewValue(cleaned);
        ngModelController.$render();

        el.setSelectionRange(start, end);
        return cleaned;
      });
    }
  }
});

html 输入使用此指令(逗号输入)并具有 type="tel"。

Answer 1

这似乎确实是某些设备的问题。我在三星 S7 设备上遇到了类似的问题。我唯一有效的解决方案是将 setSelectionRange() 方法插入 setTimeout() 中。

setTimeout(() => {
    el.setSelectionRange(selStart, selEnd);
});

setTimeout 方法中的毫秒 参数可以省略，因为我们不需要在执行前等待。