使用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);
时间: 2024-10-25 16:58:47

使用JS在textarea在光标处插入内容的相关文章

在光标处插入内容。

function insertAtCursor(myField, myValue) { if (document.selection) { //IE myField.focus(); var sel = document.selection.createRange(); //创造range对象 sel.text = myValue; //由于我们选择的RANGE对象长度就是光标,直接赋插入值即可 }else if (myField.selectionStart || myField.select

js在光标处插入内容

//场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createTextNode("插入的值")); //场景二 如果需要插入HTML文本,考虑到在弹出框中插入的场景,因此修改为如下方式var range;//记录光标位置对象var node = window.getSelection().anchorNode;// 这里判断是做是否有光标判断,因为弹出框默认

textarea 在光标处插入文字

html: <textarea id="text" style="width:500px;height:80px;">欢迎访问http://cssfirefly.cnblogs.com/</textarea> <input type="button" value="插入文字" onclick="insertText(document.getElementById('text'),' Ne

在textarea和input光标处插入内容,支持ie

项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效.直接上代码 1 function insertAtCursor(myField, myValue) { 2 //IE support 3 if (document.selection) { 4 myField.focus(); 5 sel = document.selection.createRange(); 6 sel.te

js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

可编辑DIV (contenteditable=&quot;true&quot;) 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

JQ在光标处插入文字

内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":function(value){ //默认参数 value=$.extend({ "text":"123" },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){

解决从光标处插入图片光标消失的问题

最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行. 此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便后续学习使用. 1. TheViper,说的很详细 http://www.cnblogs.com/TheViper/p/4303158.html 2.这块说的一幕了然  http://w3cboy.com/post/2015/06/iframe-insert-picture-cursor/ 以上代码

修正《更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)》中的一个问题

转载请注明: TheViper http://www.cnblogs.com/TheViper  以前写过一篇更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入),里面只测试了ie,事实上在firefox中有个小问题,就是不管插入图片前,编辑器有没有焦点(光标),在插入后,光标会消失. 插入前没有焦点 插入前有焦点 修正 function insertImage(html){ restoreSelection(); if(document.selection) currentRan