[解決済み] 入力フォーカスでテキストを選択する

質問

テキスト入力があります。入力にフォーカスが当たったとき、入力の中のテキストを選択したい。

jQueryだとこのようになりますね。

<input type="text" value="test" />

$("input[type=text]").click(function() {
    $(this).select();
    // would select "test" in this example
});

Angularの方法を見つけるためにいろいろと探しましたが、私が見つけたほとんどの例は、モーダルプロパティの変更を監視するディレクティブを扱っています。私は、フォーカスを受ける入力を監視するディレクティブが必要だと考えています。どのようにすればよいのでしょうか？

どのように解決するのですか?

Angularでこれを行う方法は、あなたのためにオートセレクトを行うカスタムディレクティブを作成することです。

module.directive('selectOnClick', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });
        }
    };
}]);

このようにディレクティブを適用します。

<input type="text" value="test" select-on-click />

デモを見る

更新1 : jQueryの依存関係を削除しました。

更新2 : 属性として制限する。

更新3 : モバイルSafariで動作するようにしました。テキストの一部を選択できるようにした（IE>8が必要）。