読者です 読者をやめる 読者になる 読者になる

input テキストフィールドでカーソルの位置を指定する。

HTML  input テキストフィールドで任意の範囲を選択するには、

<input type="text" value="1234567890">

jQuery で、focus して、setSelectionRange( 開始位置、終了位置 );

    $('input').focus().get(0).setSelectionRange(3, 6);

f:id:posturan:20170425223953j:plain

setSelectionRange で指定する値は、0始まりで数える。

この setSelectionRange を使って、カーソルの位置を任意の位置に指定することができる。
→ 開始位置 と 終了位置を同じにすれば、その位置にカーソルを持ってくることができる。

    $('input').focus().get(0).setSelectionRange(3, 3);

これは、上の input であれば、3と4の間にカーソルがくる。
以下でも同じくカーソルが3と4の間にくるが、

$('input').get(0).selectionStart = 3;
$('input').get(0).selectionEnd = 3;

selectionEnd を 6 で指定して

$('input').get(0).selectionStart = 3;
$('input').get(0).selectionEnd = 6;

これで、範囲選択になるのかというとそうではない。setSelectionRange( 開始位置、終了位置 ); で同じ値をセット
するというので、カーソルの位置を任意の位置に指定すると覚えた方が良い気がする。

現在のカーソル位置に、任意の文字を挿入したいなら、

var pos =  $('input').get(0).selectionStart;
$('input').val( $('input').val().substr(0, pos) + '-' + $('input').val().substr(pos));

3の後にカーソルを充てて、
f:id:posturan:20170425230604j:plain