« VMware (β) vs. Parallels(β2) 起動及びコピー編 | トップページ | 前方一致検索 X 2 = and検索 »

2006年12月29日 (金)

JavaScriptでカーソルの位置に文字を挿入 その2

このマイナーなブログに「javascript textarea 挿入」で辿り着かれる方が多いみたいですし、前回この題で書いた時はソースを書かなかったのでで少し書いてみます。これってあまり選択の余地はないと思いますけどね。簡単にする為に、「セレクトメニューで選んだ文字列をテキストエリアのカーソルがある位置に挿入する」ということで話を進めます。まずは以下のソースのHTMLを書いてください。

<!DOCTYPE HTML>

<html>

<head>

<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を使ったカーソルの位置の取得の仕方が載っていたと思います。

追記 Internet Explorer 9では上記のソースが使えるようになっていました。ということで、IE用に別ソースを書く時代は終焉したみたいです

追記2 肝心なことを書き忘れていました。Internet Explorer 9の場合このJavaScriptはXHTMLもしくはHTML5で書かれたページ上でしか動きません。ということで、上記の例のHTMLのソースをHTML5に手直ししておきました。

« VMware (β) vs. Parallels(β2) 起動及びコピー編 | トップページ | 前方一致検索 X 2 = and検索 »

コメント

参考になりました!

古い情報なのにわざわざありがとうございます。

内容の更新をよろしくお願いします。

「たぶんie9ではうごきません」さん、

ご指摘ありがとうございました。自分ではここ数年XHTMLかHTML5しか使っていなかったのですっかり忘れていましたが、Internet Explorer 9の場合、上記のJavaScriptはXHTMLかHTML5で書かれたページ上でしか動きません。HTMLのソースをHTML5に修正しておきました。いい加減な情報を掲載したままにしてごめんなさい。

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: JavaScriptでカーソルの位置に文字を挿入 その2:

« VMware (β) vs. Parallels(β2) 起動及びコピー編 | トップページ | 前方一致検索 X 2 = and検索 »

2019年9月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

最近のトラックバック