textareaのカーソル位置にテキストを挿入する

HTML の textarea フォームで、カーソル位置にダイアログで設定したテキストを挿入する方法を紹介します。

＜前提＞

  • jQuery を使います。

  1. <head>～</head>に、以下を追加します

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.5");
</script>
<script type="text/javascript">
var caret_pos;
function insertTextAtPosision(obj, pos, txt) {
    obj.focus();
    if (jQuery.browser.msie) {
        pos.text = txt;
        pos.select();
    } else {
        var s = obj.value;
        var np = pos + txt.length;
        obj.value = s.substr(0, pos) + txt + s.substr(pos);
        obj.setSelectionRange(np, np);
    }
}
function getCaretPosition(obj) {
    obj.focus();
    var pos;
    if (jQuery.browser.msie) {
        pos = document.selection.createRange();
    } else {
        pos = obj.selectionStart;
    }
    return pos;
}
</script>

  2. textareaフォームとダイアログを開くボタンを設置します

    <form method="get" action="javascript:void(0);" id="form1">
<p>
<textarea id="txtarea1" cols="50" rows="5">ABCDEabcde12345</textarea><br />
<button id="dlgbtn">ダイアログ表示</button>
</p>
</form>

  3. ダイアログの設定をします

    <script type="text/javascript">
$(function() {
    $("#dlg").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        buttons: {
            '挿入': function() {
                insertTextAtPosision(
                    $('#txtarea1').get(0),
                    caret_pos,
                    $('#txt').val()
                );
                $(this).dialog('close');
            },
            'キャンセル': function() {
                $(this).dialog('close');
            }
        },
        open: function() {
            $('#txt').val('')
        }
    });
    $('#dlgbtn').click(function(){
        caret_pos = getCaretPosition($('#txtarea1').get(0));
        $('#dlg').dialog('open');
    });
});
</script>

サンプル：


2009
11/26
CATEGORY
HTML
JavaScript
コメントは受け付けていません。
コメント　停止中