如何在input、textarea中光标处插入指定内容

RT,或许你们脑子里首先想到的是使用富文本编辑器,那么恭喜你,想法是对的。But,很多富文本编辑器并没有提供很多的api,这里推荐使用百度Ueditor,它提供了很好的api以及文档,但是话又说回来,如果使用这个,有点大材小用了。

那么,说回正题,如题,如何使用简单的代码实现这一需求呢,话不多说,老规矩,直接上代码:

//html代码:



//js代码:
 $('#textarea').on('select',function () {
                message.setCaret(this);
            }).on('click',function () {
                message.setCaret(this);
            }).on('keyup',function () {
                message.setCaret(this);
            });

$('#insert').on('click',function () {
    var textareaStr = $('#textarea').val();
    message.insertAtCaret($('#textarea')[0],'<--需要插入的文本-->');
});

var message = {
    setCaret :function (textObj) {
        if (textObj.createTextRange) {
            textObj.caretPos = document.selection.createRange().duplicate();
        }
    }

    insertAtCaret :function (textObj, textFeildValue) {
        if (document.all) {
            if (textObj.createTextRange && textObj.caretPos) {
                    var caretPos = textObj.caretPos;
                    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue;
                } else {
                    textObj.value = textFeildValue;
                }
            } else {
                if (textObj.setSelectionRange) {
                    var rangeStart = textObj.selectionStart;
                    var rangeEnd = textObj.selectionEnd;
                    var tempStr1 = textObj.value.substring(0, rangeStart);
                    var tempStr2 = textObj.value.substring(rangeEnd);
                    textObj.value = tempStr1 + textFeildValue + tempStr2;
                } else {
                    alert("This version of Mozilla based browser does not support setSelectionRange");
                }
            }
        }

OK,直接复制粘贴试试吧 =0=

你可能感兴趣的:(如何在input、textarea中光标处插入指定内容)