質問: $('#text').val().replcae(/,/g, ''); $('#text').val(value); ``` のように処理しています(実際のものとは若干異なりますが、jQueryの`val`メソッドで置換していることは同じで、そこが本質だと思っています)。 ただ、こうすると、テキストボックス内の文字列を選択していても、選択が解除されてしまいます。 そのため、「もしTabキーによってフォーカスされたら、jQueryの`select`メソッドを呼んで、選択状態にする」という処理を作りたいのです。 何か方法は無いでしょうか? 同じ目的が達成できれば、別のアプローチでも構いません。
回答: 最適な手法であるかはさておき、ご質問の内容を実装することは可能です。 まず表題の「Tabキーによるフォーカスとマウスクリックによるフォーカスを区別したい」という部分ですが、これは標準DOMのfocusイベントオブジェクトに発生要因を示すデータが含まれていないため、focusイベント単体では判定不可能です。ただし、イベントの発生順序がfocus→click/keyupとなっていることを利用して、次に発生するイベントがどちらであるかにより判定可能です。 つぎに、valueプロパティを書き換えた際に選択が外れてしまう箇所に関しては、HTMLInputElement.select()またはHTMLInputElement.setSelectionRange()メソッドを利用して、選択状態を再設定することで対応可能です。前者は全選択状態に、後者は開始位置、終了位置を指定して選択部分を新たに設定するメソッドで、それぞれの詳細についてはドキュメントなどをご確認ください。 以下、サンプルではクリックによるフォーカス時にカーソル位置を文字列中央に、キーによるフォーカス時には内容文字列を逆順にして再度全選択する、という動作を実装しています。「カンマを消し...」という動作については理解力不足のためどういう動作が期待されているのか不明でした、コード全体を示していただければ書き換えてみるかもしれません。こちらはご参考までに。 ``` const $textbox = document.querySelector("#textbox"); const selectAllContentsOf$textbox = () => $textbox.select(); const setCursorPositionOf$textbox = pos => $textbox.setSelectionRange(pos, pos); const $textbox$onFocusdByClick = function (e) { console.log('got focus by click'); // move cursor to center setCursorPositionOf$textbox(this.value.length / 2); }; const $textbox$onFocusdByKey = function (e) { console.log('got focus by key'); // modify value property this.value = this.value.split('').reverse().join(''); // then select all content selectAllContentsOf$textbox(); }; $textbox.addEventListener('focus', e => { const __onClick = function () { $textbox$onFocusdByClick.call($textbox, e); $textbox.removeEventListener('keyup', __onKeyup, { once: true }); }; const __onKeyup = function () { $textbox$onFocusdByKey.call($textbox, e); $textbox.removeEventListener('click', __onClick, { once: true }); }; $textbox.addEventListener('click', __onClick, { once: true }); $textbox.addEventListener('keyup', __onKeyup, { once: true }); }); ``` ``` ```