jquery实现在光标位置（input、textarea）插入内容的方法

最新推荐文章于 2023-01-28 23:00:00 发布

weixin_30762087

最新推荐文章于 2023-01-28 23:00:00 发布

阅读量1.5k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/banma/p/11176517.html

版权

本文介绍了如何使用JavaScript在input输入框和textarea文本框的光标位置插入内容，分别提供了适用于不同场景的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过扫码枪扫码、按钮点击事件在光标处插入文本，这是前台js常用的功能。但是在input输入框和textarea文本框定位光标，插入数据是有点不同的

首先最简单的，适用于input输入框的方法

HTML代码：

<input id="phone"/>
<button type="button" onclick="insertContent()">插入</button>

JS代码：

function insertContent() {
        $("#phone").insertAtCaret("要插入的内容");
    }

(function($){
        $.fn.extend({
            insertAtCaret: function(myValue){
                var $t=$(this)[0];
                if (document.selection) {
                    this.focus();
                    sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
                }
                else
                if ($t.selectionStart || $t.selectionStart == '0') {
                    var startPos = $t.selectionStart;
                    var endPos = $t.selectionEnd;
                    var scrollTop = $t.scrollTop;
                    $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
                    this.focus();
                    $t.selectionStart = startPos + myValue.length;
                    $t.selectionEnd = startPos + myValue.length;
                    $t.scrollTop = scrollTop;
                }
                else {
                    this.value += myValue;
                    this.focus();
                }
            }
        })
    })(jQuery);

上面的方法并不适用于在textarea文本框中插入数据，如下方法可以解决这个问题：

HTML代码：

<textarea id="textarea" rows="10" cols="60" style="margin: 0px 0px 10px; width: 440px; height: 186px;"></textarea>
<button type="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],$("#nick").val());
});

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");
            }
        }
    }
}