4,018 views
この記事は最終更新から 1793日 が経過しています。
1. やりたいこと
ボタン押下により、
<textarea>で編集中の文章のカーソル位置に、任意の文字列を挿入したい。
これをJavaScriptで実装する。
2. やってみる
ほぼほぼこちらの内容を参考にさせていただいた。
http://qiita.com/noraworld/items/d6334a4f9b07792200a5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$("a[name='option']").click(function(){
var textarea = document.querySelector("textarea[name='bun']");
var sentence = textarea.value;
var len = sentence.length;
var pos = textarea.selectionStart;
var before = sentence.substr(0, pos);
var word = $(this).text();
var after = sentence.substr(pos, len);
sentence = before + word + after;
textarea.value = sentence;
return false;
});
});
</script>
</head>
<body>
<textarea name="bun" style="width:100%;height:10rem"></textarea>
<a name="option" href="">[山田さん]</a>
<a name="option" href="">[加藤さん]</a>
<a name="option" href="">[岡本さん]</a>
</body>
</html>
■解説
11行目: textarea内の全文字を取得する。
13行目: カーソル位置のインデックスを取得する。
14行目: カーソル位置よりも前の文字列を取得する。 ←(A)
15行目: ボタンに書かれた文字列を取得する。 ←(B)
16行目: カーソル位置よりも後ろの文字列を取得する。 ←(C)
17行目: 更新後の文字列 = (A) + (B) + (C) として新しい文字列を作成する。
18行目: textareaに書き戻す。
19行目: リンク押下によるジャンプを機能させない。
サンプルはこちらです。
//www.dogrow.net/hp/sample/00016/