对齐输入框中的文本

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";

- Yaniv

---

你能创建一个 JSFiddle 吗？ - Nouphal.M

我是新手，所以希望我写了一个好的例子。当您单击按钮并且数字过长时，您将看不到新的数字。 http://jsfiddle.net/d7654/2/ - Yaniv

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中有一个小烦恼。当文本输入框失去焦点时，它似乎会滚动回到其开头。这在单击任何其他元素时发生，因此上面的指令并不完美。然而，Firefox似乎在模糊时保持滚动位置。

说实话，我可能建议更改界面，要么只允许使用maxlength属性输入最大字符数，要么始终使所有输入字符可见，例如使用<textarea>元素。有各种插件可用（或者您可以编写自己的自定义指令）来动态调整文本区域的高度，以便始终显示输入的所有字符。

- Michal Charemza

Answer 2

您可以使用原生JS将光标位置设置为始终在最后。

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

jsfiddle

的翻译是：

- casraf

---

谢谢，但我必须使用JSFiddle吗？ - Yaniv

不，JSFiddle只是用来分享实时的JS示例。 - casraf

在这个上下文中，“Vanilla” 的意思是：普通的。 - Flores