PSLブログ

ヨシナシゴトヲツヅリマス

textareaのカーソル位置に文字列挿入

Perl/CGI

jQueryを使う方法をほぼそのまま使わせていただきました。

エンジニアきまぐれTips - テキストエリアの現在のカーソル(キャレット)位置に文字を挿入するには

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.fn.extend({
    insertAtCaret: function(v) {
        var o = this.get(0);
        o.focus();
        if (jQuery.browser.msie) {
            var r = document.selection.createRange();
            r.text = v;
            r.select();
        } else {
            var s = o.value;
            var p = o.selectionStart;
            var np = p + v.length;
            o.value = s.substr(0, p) + v + s.substr(p);
            o.setSelectionRange(np, np);
        }
    }
});
</script>
</head>
<body>
<form>
<select onchange="$('#_str').insertAtCaret(this.options[this.selectedIndex].value);this.selectedIndex=0">
<option value="">文字列貼り付け▼</option>
<option value="あああ">あああ</option>
<option value="いいい">いいい</option>
<option value="ううう">ううう</option>
</select>
<br />
<textarea name="str" id="_str" cols="80" rows="20"></textarea>
</form>
</body>
</html>