テキストがテキストボックスの幅よりも長い場合にテキストを最初から表示する

Question

テキストが入力フィールドに追加され、その幅を超えるテキストが追加された場合。フォーカスが入力フィールドの外に移動した（ぼやけた）とき、私はそのテキストを最初から表示したい（ユーザーが入力を止めた場所ではない）。

Chromeでは、デフォルトで機能しています。つまり、入力フィールドからフォーカスが失われたときに、Chromeは自動的にカーソルをテキストの先頭に移動します。

Mozilla、EDGE、IEでは、この動作は機能しません。

Answer 1

非常に簡単です。

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>

のMozillaでこの例を move cursor to the beginning of the input field?

実行：ディレクティブを作成してから答えを使用