对齐输入中的文本答案

【问题标题】：Align text in input对齐输入中的文本
【发布时间】：2014-01-10 17:17:40
【问题描述】：

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

【问题讨论】：

你能创建一个 jsfiddle 吗？
我是新手，所以我希望我在那里写了一个很好的例子。当您单击按钮并且数字太宽时，您看不到新数字。 jsfiddle.net/d7654/2

标签： html angularjs typescript

【解决方案1】：

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

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

jsfiddle

【讨论】：

谢谢，但我必须使用 JSFiddle 吗？
不，JSFiddle只是为了分享现场JS示例。
Vanilla 在这种情况下的意思是：平原

【解决方案2】：

您可能应该在指令中分离出这种行为。有几种方法可以做到这一点，但一种是在输入中添加一个指令，如果模型已更改，则更改插入符号的位置，但前提是它没有焦点（即更改来自 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 属性，或者始终使输入的所有字符可见，例如使用 <textarea> 元素.有各种可用的插件（或者您可以编写自己的自定义指令）来动态调整文本区域的高度，因此它将始终显示所有输入的字符。

【讨论】：