Question

我的HTML中有一个input标记，其中可能包含一个很长的数字，有时会比查看时间长。此字段可以从键盘或我在html页面中的某些数字按钮获取输入。

如果我从键盘输入数字，即使数字长于可以查看的数字，我也总能看到最后输入的数字。但是如果我从数字按钮输入数字并且它比字段长，我可以看到第一个数字而不是最后输入的数字。

有没有办法设置文本，当数字长于可查看时，我总会看到最后输入的数字？

输入字段：

<input id="numberEntry" type="tel" data-ng-model="numberInput" data-ng-change="commands.inputTextChanged.execute();" class="numberEntry"/>

.numberEntry {
    width: 100%;
    text-align: center;
    font-size: 28px;
}

这是将数字（例如内联'4'）添加到数字末尾的代码（通过AngularJS）：

this.mScope.numberInput = this.mScope.numberInput + "4";

Answer 1

您可能应该在指令中分离出这种行为。有几种方法可以做到这一点，但一种方法是在输入中添加一个指令，如果模型发生了变化，它会改变插入位置，但前提是它没有焦点（即改变来自Angular，来自单击按钮，而不是用户键入。）

app.directive('onChangeCaretEnd', function($document) {
  return {
    scope: {
      'ngModel': '='
    },
    link: function(scope, element, attrs) {
      scope.$watch('ngModel', function(newValue) {
        var hasFocus = (element[0] == $document[0].activeElement);
        // Set focus if doesn't have focus
        if (!hasFocus) {
          element[0].focus();
          // Chrome doesn't seem to need the line below, but FF does.
          element[0].selectionStart = element[0].selectionEnd = newValue.length;
        }
      });
    }
  };
});

该指令可用于使用ngModel的输入：

<input id="numberEntry" type="tel" data-ng-model="numberInput" data-on-change-caret-end />

您可以在以下Plunkr中看到此操作

http://plnkr.co/edit/NgFS8WWfEDKpTtVI71uq?p=preview

然而，Chrome中存在一些烦恼。当文本输入在Chrome中失去焦点时，它似乎会回滚到它的开头。这发生在点击任何其他元素上，因此上述指令并不完美。 Firefox似乎保持滚动位置模糊。

老实说，我可能会建议将界面更改为仅允许输入的最大字符数，使用maxlength属性，或者始终使所有字符都可见，例如使用{{1而是元素。有各种插件可用（或者您可以编写自己的自定义指令）来动态调整textarea的高度，因此它将始终显示输入的所有字符。

Answer 2

您可以使用vanilla JS将插入位置设置为始终是最后一个。

yourbutton.onclick = function() {
    var el = document.getElementById('myinput');
    el.focus();
    el.setSelectionRange(el.value.length, el.value.length);
}

jsfiddle

对齐输入中的文本

2 个答案: