[解決済み] Javascript/jqueryでカーソル位置のテキストを挿入する。
2022-04-22 19:50:14
質問
テキストボックスがたくさんあるページがあります。誰かがリンクをクリックすると、カーソルがある場所に単語を挿入したり、フォーカスのあるテキストボックスに追加したりしたいのです。
例えば、カーソルが「apple」というテキストボックスにあり、「[email]」というリンクをクリックした場合、テキストボックスに「apple [email protected]」と表示させたいのです。
どうすればいいのでしょうか?もしフォーカスがradio/dropdown/non textbox要素にあったらどうするのでしょうか?最後にフォーカスされたテキストボックスを記憶させることはできますか?
解決方法は?
これを使ってください。 ここで :
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
if (!txtarea) {
return;
}
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false));
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart('character', -txtarea.value.length);
strPos = range.text.length;
} else if (br == "ff") {
strPos = txtarea.selectionStart;
}
var front = (txtarea.value).substring(0, strPos);
var back = (txtarea.value).substring(strPos, txtarea.value.length);
txtarea.value = front + text + back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var ieRange = document.selection.createRange();
ieRange.moveStart('character', -txtarea.value.length);
ieRange.moveStart('character', strPos);
ieRange.moveEnd('character', 0);
ieRange.select();
} else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
<textarea id="textareaid"></textarea>
<a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>
関連
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] JavaScriptで日付の書式設定に関するドキュメントはどこにありますか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] jQuery get specific option tag text
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
要素ツリー制御によるvueTreeテーブル
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vue ディレクティブ v-html と v-text
-
Vueのフィルタの説明
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] jQueryでtextareaにテキストを挿入する