[JavaScript] テキストボックスの現在のキャレット位置に文字列を挿入する

<input type="text">要素や<textarea>要素の現在キャレットがある位置に文字列を挿入するJavaScriptのサンプルです。jQueryを使用しています。

<button id="button">ABCを挿入</button>
<input id="input">
<script>
$('#button').click(function(){
	let elm = $('#input')[0];
	let value = $('#input').val();
	let head = value.slice(0,elm.selectionStart);
	let foot = value.slice(elm.selectionEnd);
	let newValue = head + 'ABC' + foot;
	$('#input').val(newValue);
});
</script>

サンプルの解説です。head変数に先頭からキャレット開始位置までの文字列を格納、foot変数にキャレット終了位置から末尾までの文字列を格納。最後に、挿入したい文字列をheadとfootで挟み、要素にセットするという処理を行っています。

要素の現在のキャレット位置を取得するにはselectionStartプロパティとselectionEndプロパティを使用します。それぞれ先頭を0としたキャレットまでの文字数が整数で格納されています。

要素内の文字列が未選択状態のときは、selectionStartプロパティの値＝selectionEndプロパティの値になります。要素内の文字列が選択状態のときは、selectionStartプロパティには選択開始位置が、selectionEndプロパティには選択終了位置が、それぞれ格納されます。

7行目,8行目のslice()メソッドは文字列から一部を切り取って返す関数です。第1引数に開始位置、第2引数に切り取る長さを指定します。第2引数が省略された場合は文字列の末尾までが切り取られます。