JavaScriptでカーソルの位置に文字を挿入 その２
このマイナーなブログに「javascript textarea 挿入」で辿り着かれる方が多いみたいですし、前回この題で書いた時はソースを書かなかったのでで少し書いてみます。これってあまり選択の余地はないと思いますけどね。簡単にする為に、「セレクトメニューで選んだ文字列をテキストエリアのカーソルがある位置に挿入する」ということで話を進めます。まずは以下のソースのHTMLを書いてください。
<html>
<head>
<title></title>
<script type="text/javascript" src="insert.js"></script>
</head>
<body>
<select id="letters" onchange="insert()"> <option>ABC</option>
<option>DEF</option>
<option>GHI</option>
</select>
<textarea id="txtarea" cols="50" rows="10">
</textarea>
</body>
</html>
で、JavaScriptはinsert.jsという外部ファイルに以下のものを書きます。
function insert(){
var mojiretsu = document.getElementById('letters').value;
var area = document.getElementById('txtarea');
var bun = document.getElementById('txtarea').value;
var nagasa = bun.length;
var basho = area.selectionStart;
var mae = bun.substr(0, basho);
var ushiro = bun.substr(basho, nagasa);
document.getElementById('txtarea').value = mae + mojiretsu + ushiro;
}
これでセレクトメニューを変えるたびにカーソルの位置に選択された文字列が挿入されるはずです。SafariとFirefoxでしか実験してません。Internet Explorer？ 何ですかそれ？（笑） まあ適当に調整して使ってください。
ブックマークしてなかったのでうろ覚えですが、MozillaかなんかのJavaScriptのtipsにselectionStartを使ったカーソルの位置の取得の仕方が載っていたと思います。
コメント