テキスト入力があります。入力がフォーカスを受け取ったら、入力内のテキストを選択します。
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 />
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;
});
}
};
})
これはAngular1.xの古い答えです
これを行うためのより良い方法は、ng-click組み込みのディレクティブを使用することです。
<input type="text" ng-model="content" ng-click="$event.target.select()" />
編集：
JoshMBが親切に思い出させたように; Angular1.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()" />
ディレクティブは必要ありませんonfocus="this.select()"。入力要素またはテキスト領域にネイティブJavaScriptを追加するだけです。
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();
});
}
};
});
クリック、フォーカス、またはタブですべてのテキストを選択する最も簡単な方法は、!!!：です。
<input (focus)="inputFocused($event)">
..。
inputFocused(event: any){
event.target.select()
}
私のために働いた修正版。最初のクリックでテキストを選択し、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
});
}
}
}）
$event.target.select()Angularテンプレートで解決されていません
イベントターゲットは任意のHTML要素にすることができ、アプリケーションインターフェイスへのキャストをここで適用する必要があります（のようにHTMLSelectElement）。ただし、Angular式ではキャストできません。最善の回避策は、次のようにラップ$event.targetすることです。$any()
したがって、次のようになります。(focus) = $any($event.target).select()
詳細な説明はここにあります。