使用JS在textarea在光标处插入内容

Posted 性能、可用性、伸缩性、扩展性、安全性、可监控是网站架构最核心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JS在textarea在光标处插入内容相关的知识,希望对你有一定的参考价值。

    // 在光标处插入字符串
    // myField    文本框对象
    // myValue 要插入的值
    function insertAtCursor(myField, myValue)
    {
        //IE support
        if (document.selection)
        {
            myField.focus();
            sel            = document.selection.createRange();
            sel.text    = myValue;
            sel.select();
        }
        //MOZILLA/NETSCAPE support
        else if (myField.selectionStart || myField.selectionStart == ‘0‘)
        {
            var startPos    = myField.selectionStart;
            var endPos        = myField.selectionEnd;
            // save scrollTop before insert
            var restoreTop    = myField.scrollTop;
            myField.value    = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
            if (restoreTop > 0)
            {
                // restore previous scrollTop
                myField.scrollTop = restoreTop;
            }
            myField.focus();
            myField.selectionStart    = startPos + myValue.length;
            myField.selectionEnd    = startPos + myValue.length;
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }

 

       function insertText() {
            var obj = document.getElementById("文本框");
            var str = "[#$%$#]插入的内容";
               if (document.selection) {
                   obj.focus();
                   var sel = document.selection.createRange();

                   sel.text = str;

               } else if (typeof obj.selectionStart === ‘number‘ && typeof obj.selectionEnd === ‘number‘) {
                   var startPos = obj.selectionStart;
                   var endPos = obj.selectionEnd;
                    var tmpStr = obj.value;
                    obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                } else {
                    obj.value += str;
            }
        }

 

 

//jQuery光标处插入文本

        $(document).ready(function () {
            $("#btnInsert").click(function () {
                var obj = $("#txtquestion").get(0);
                var str = "[#$%$#]";
                if (document.selection) {
                    obj.focus();
                    var sel = document.selection.createRange();
                    sel.text = str;
                } else if (typeof obj.selectionStart === ‘number‘ && typeof obj.selectionEnd === ‘number‘) {
                    var startPos = obj.selectionStart;
                    var endPos = obj.selectionEnd;
                    var tmpStr = obj.value;
                    obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                } else {
                    obj.value += str;
                
            });
        });

 

        (function ($) {
            $.fn.insertContent = function (myValue, t) {
                var $t = $(this)[0];
                if (document.selection) { //ie
                    this.focus();
                    var sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
                    sel.moveStart(‘character‘, -l);
                    var wee = sel.text.length;
                    if (arguments.length == 2) {
                        var l = $t.value.length;
                        sel.moveEnd("character", wee + t);
                        t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);

                        sel.select();
                    }
                } 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;
                    if (arguments.length == 2) {
                        $t.setSelectionRange(startPos - t, $t.selectionEnd + t);
                        this.focus();
                    }
                }
                else {
                    this.value += myValue;
                    this.focus();
                }
            };
        })(jQuery);

 

以上是关于使用JS在textarea在光标处插入内容的主要内容,如果未能解决你的问题,请参考以下文章

textarea光标处插入文字

js在光标处插入内容

使用Javascript在文本区域中的光标处插入文本

代码片段如何使用CSS来快速定义多彩光标

Quill 编辑器 - 在 quill 编辑器中的光标处插入内容

重要重要如何在div是contentEditable=true的里面获取光标的位置,并在光标位置处插入内容。焦点位置插入指定内容