js textarea、テキストフィールドのキャレットの位置(カーソル位置)を変更したい(setSelectionRange())
好きな場所にカーソルを移動させたい
作成日:2019-12-27, 更新日:2019-12-27
基本
・「setSelectionRange()」を使う感じ。
・jqueryの「$(〇〇〇)」を使う感じで「$(〇〇〇).setSelectionRange()」はダメ。ひと手間加えればOK・・・だけど、ひと手間加える必要が無いので放置。
サンプル
・Chrome以外では確認していない
・面倒なので対象のtextarea(or テキストフィールド)にIDを割振る
・テキストフィールドの場合、カーソル位置を変更しても対象のトコまでスクロールされないので「blur()」「focus()」を追記する
var move_caret = function(elm_id, pos_fst, pos_end) { if ( pos_end == null) { pos_end = pos_fst; } var elm = document.getElementById(elm_id); if (elm.setSelectionRange) { elm.setSelectionRange(pos_fst, pos_end); } else if (elm.createTextRange) { // 「setSelectionRange()」が対応されていないブラウザ用 var range = elm.createTextRange(); range.move('character', pos_fst); range.select(); } else { //alert('このブラウザではカーソルの移動は無理'); console.log('このブラウザではカーソルの移動は無理'); } elm.blur(); elm.focus(); return null; } move_caret(ID, 始点の文字数, 終点の文字数);