入力フォーカスのテキストを選択

テキスト入力があります。入力がフォーカスを受け取ったら、入力内のテキストを選択します。

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 />

View demo

Update1：jQuery依存関係を削除しました。

Update2：属性として制限。

Update3：モバイルSafariで動作します。テキストの一部を選択できます（IE> 8が必要です）。

次に、ユーザーがクリックして入力ボックスにカーソルを置いたときにテキストが再選択されないようにする拡張ディレクティブを示します。

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            var focusedElement;
            element.on('click', function () {
                if (focusedElement != this) {
                    this.select();
                    focusedElement = this;
                }
            });
            element.on('blur', function () {
                focusedElement = null;
            });
        }
    };
})

これは古い回答です、Angular 1.xの場合

それを行うより良い方法は、ng-click組み込みディレクティブを使用することです：

<input type="text" ng-model="content" ng-click="$event.target.select()" />

編集：

以下のようJoshMBは親切に思い出しました。Angular 1.2以降でDOMノードを参照することはできなくなりました。だから、私は$event.target.select()コントローラーに移動しました：

<input type="text" ng-model="content" ng-click="onTextClick($event)" />

次に、コントローラーで：

$scope.onTextClick = function ($event) {
    $event.target.select();
};

これがフィドルの例です。

提案された解決策のどちらも私にはうまくいきませんでした。簡単な調査の後、私はこれを思いつきました：

module.directive('selectOnFocus', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var focusedElement = null;

            element.on('focus', function () {
                var self = this;
                if (focusedElement != self) {
                    focusedElement = self;
                    $timeout(function () {
                        self.select();
                    }, 10);
                }
            });

            element.on('blur', function () {
                focusedElement = null;
            });
    }

  }

});

これは提案されているいくつかのソリューションの組み合わせですが、クリックとフォーカスの両方で機能し（オートフォーカスと考えてください）、入力の部分的な値を手動で選択できます。

私にとって、ng-clickは意味がありませんでした。すべてのテキストを再度選択しないとカーソルの位置を変えることができなかったため、これは不愉快なことでした。次に、入力がフォーカスされなかった場合にのみテキストが選択されるため、ng-focusを使用することをお勧めします。もう一度クリックしてカーソルを再配置すると、期待どおりにテキストの選択が解除され、その間に書き込むことができます。

私はこのアプローチが期待されるUXの振る舞いであることがわかりました。

ng-focusを使用する

オプション1：別のコード

<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />

そしてコントローラーで

$scope.onTextFocus = function ($event) {
  $event.target.select();
};

オプション2：別の方法として、上記のコードをこの「ワンライナー」に結合できます（これはテストしていませんが、機能するはずです）。

<input type="text" ng-model="content" ng-focus="$event.target.select()" />

angular 2では、これはChromeとFirefoxの両方で私にとってうまくいきました：

<input type="text" (mouseup)="$event.target.select()">

受け入れられた回答はクリックイベントを使用していますが、フォーカスイベントを使用する場合、最初のクリックのみがイベントを発生させ、他のメソッドが入力にフォーカスするために使用されたときにも発生します（タブを押す、コードでフォーカスを呼び出すなど）。

これにより、Tamlynの回答が示唆するように、要素がすでにフォーカスされているかどうかを確認する必要もなくなります。

app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});

ディレクティブは必要ありませんonfocus="this.select()"。入力要素またはテキスト領域にネイティブJavaScriptを追加するだけです。

私のために働いた修正バージョン。最初のクリックでテキストを選択し、同じ要素を2回クリックするとテキストの選択を解除します

module.directive('selectOnClick', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var prevClickElem = null; //Last clicked element
        var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function

        element.on('click', function () {
            var self = this;
            if (prevClickElem != self) { //First click on new element
                prevClickElem = self; 
                $timeout(function () { //Timer
                    if(self.type == "number")
                        self.select();
                    else
                        self.setSelectionRange(0, self.value.length)
                }, 10);
            }
            else { //Second click on same element
                if (self.type == "number") {
                    ignorePrevNullOnBlur = true;
                    self.blur();
                }
                else
                    self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos
            }
        });

        element.on('blur', function () {
            if (ignorePrevNullOnBlur == true)
                ignorePrevNullOnBlur = false; //blur called from code handeling the second click 
            else
                prevClickElem = null; //We are leaving input box
        });
    }
}

}）