テキストボックスに文字列やタグを挿入する方法

質問

テキストボックスのカーソルで選択した部分に文字列、もしくはタグを挿入させたいのですが、
例えば
あいう｜えお｜でえおの部分をカーソルで選択して、何かボタンなどを押下すると自動で
あいう<s>えお<s>といった具合にタグを挿入してほしいのです。
ホームページで調べたところ、
テキストエリアで実現する方法が下のURLでみつけたのですが、
http://archiva.jp/web/javascript/getRange_in_textarea.html
テキストボックスで実行したいのですが、上の方法ではうまくいきません。
テキストボックスの場合どうすればいいのでしょうか？
どなたか回答よろしくお願いいたします。

また、上のホームページで使われているJavaScriptを載せます。
function surroundHTML(tag, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
var val = target.value;
var range = val.slice(pos.start, pos.end);
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;

if (range || pos.start != pos.end) {
insertNode = '<' + tag + '>' + range + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
else if (pos.start == pos.end) {
insertNode = '<' + tag + '>' + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
}

function getAreaRange(obj) {
var pos = new Object();

if (isIE) {
obj.focus();
var range = document.selection.createRange();
var clone = range.duplicate();
clone.moveToElementText(obj);
clone.setEndPoint('EndToEnd', range);
pos.start = clone.text.length - range.text.length;
pos.end = clone.text.length - range.text.length + range.text.length;
}
else if (window.getSelection()) {
pos.start = obj.selectionStart;
pos.end = obj.selectionEnd;
}
return pos;
alert(pos.start + "," + pos.end);
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer') + 1 ? 1 : 0);

回答No.1

fujillin

日和って
<textarea cols="60" rows="1" name="text" style="overflow:hidden;">
なんてのじゃ、ダメですよね？（笑）

要は、選択範囲の取得の問題かと…

テキストエリアに限らず取得可能なようなので、以下の情報がご参考になるかと思います。
（内容の検証してはいません）
http://blog.wonder-boys.net/?p=342
http://wiki.bit-hive.com/tomizoo/pgdiff/?pg=JavaScript%20Range%A4%CE%BB%C8%A4%A4%CA%FD&rev=22
http://d.hatena.ne.jp/brazil/20061021/1161377936
http://blog.iss.ms/2008/09/20/143725