当文本长于文本框的宽度时从头开始显示文本

Question

当输入字段中添加了一些文本并且文本超出其宽度时。现在，当焦点移到输入字段之外（模糊）时，我想从头开始显示它的文本（而不是用户停止输入的地方）。

在 Chrome 中，它默认工作，即当焦点从输入字段中丢失时，Chrome 自动将光标移动到文本的开头。

在 Mozilla、EDGE、IE 中，此行为不起作用。

Answer 1

很简单。创建指令并使用以下答案：move cursor to the beginning of the input field?

运行 Mozilla 上的这个例子

var app = angular.module("sa", []);

app.directive("fixCursorFoo", function () {
    return {
        restrict: 'A',
        link: function ($scope, $element) {
            $element.on("blur", function () {
                var inp = $element[0];
                if (inp.createTextRange) {
                    var part = inp.createTextRange();
                    part.move("character", 0);
                    part.select();
                } else if (inp.setSelectionRange) {
                    inp.setSelectionRange(0, 0);
                }
            })
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="sa">
  <input type="text" fix-cursor-foo class="form-control" />
</div>

当文本长于文本框的宽度时从头开始显示文本

Show text from beginning when text is longer than textbox's width

internet-explorer

mozilla

angularjs

angular-ui-bootstrap

microsoft-edge