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

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

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

//html代码:
<textarea id="textarea" name="tarea" placeholder="请输入文字" rows="" cols="" >
</textarea>
<button id='insert'>插入</button>

//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=

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 155,929评论 24 680
  • 文章语音版:http://mp.weixin.qq.com/s?__biz=MzAxOTU3Mjk3NQ==&mi...
    glorialuang阅读 441评论 0 51
  • 日历是陪伴很多人生活的必备之物,从泛黄的老黄历上,感受时间的流逝。当然一旦融入了创意与设计,小小的日历就成为了兼具...
    文8阅读 1,372评论 3 17
  • 作者:浅吟轻唱 谁在佛前装淡定,随波不与相争。桃花镜里怎修行,雨飞清影乱,烛火映心经。 寒漏紧催人梦觉,依稀求取功...
    随意诗社阅读 146评论 0 9
  • 在和一个90后做视频,当谈到武侠,他表示从未看过金庸的小说。我很震惊,青春少年,怎么会没有江湖和武侠?我一直以为,...
    琴生慢阅读 102评论 0 0