ボタンをクリックすると、任意の位置のテキスト入力にどのように特殊文字を挿入しますか？

Question

この質問は複数回回答されましたfor example。しかし、それらのどれもが任意の点での挿入に対処していない。

文字入力やテキストエリア、キーボードにない記号（例えばpi）のボタン、またはテキストが強調表示されている場合はアクセント記号やその他の発音区別記号を追加するボタンがある場合。どのように現在のキャレットの位置または選択位置に挿入しますか？ユーザーがカーソルを移動し、マウスがクリックされると、入力にフォーカスが失われ、キャレットまたは選択が削除されます。あなたは.selectionStart（強調表示されたテキストの開始インデックス）と.selectionEnd（強調表示されたテキストの終了インデックスを）したいよう

<input id="formula" type="text"> 
<button onclick="insertIntoFormula">π</button> 

Answer 1

が鳴ります。それがちょうどカーソルの場合、両方ともその位置を返します。

function insertIntoFormula(specialChar) { 
 
    const textarea = document.getElementById('formula'); 
 
    const insertStartPoint = textarea.selectionStart; 
 
    const insertEndPoint = textarea.selectionEnd; 
 
    let value = textarea.value; 
 
    
 
    // text before cursor/highlighted text + special character + text after cursor/highlighted text 
 
    value = value.slice(0, insertStartPoint) + specialChar + value.slice(insertEndPoint); 
 
    textarea.value = value; 
 
}

<input id="formula" type="text"> 
 
<!-- remember to actually pass the special character --> 
 
<!-- (you *could* just get the innerText of the triggering button but I wouldn't recommend it) --> 
 
<button onclick="insertIntoFormula('π')">π</button> 
 
<button onclick="insertIntoFormula('é')">é</button>