div模拟textarea在光标位置插入数据代码示例

2016-3-12 Jon js+jquery+ajax

input、textarea在光标位置插入数据示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>textarea在光标位置插入数据示例</title>
      <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    <body>
      <button id="ch_button" value="插入">插入</button>
      <input name="content" id="test_in" style="width:80%"/>
      <script>
        $(function() {
          /* 在textarea处插入文本--Start */
          $.fn.extend({
            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();
              }
            }
          })
        });
        $(document).ready(function() {
          $("#ch_button").click(function() {
            $("#test_in").insertContent("<upload/day_140627/201406271546349972.jpg>");
          });
        });
      </script>
    </body>
    </html>

您可以修改框中代码后运行查看

div模拟textarea在光标位置插入数据代码示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>div模拟textarea 在光标位置插入数据代码示例</title>
      <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
      <style>
        #textdiv {
          width: 300px;
          height: auto;
          border: 1px solid #333;
          overflow-x: hidden;
          word-wrap: break-word;
          outline: 0px;
          min-height: 220px;
        }
      </style>
    </head>
    <body>
      <div id="textdiv" contenteditable="true"></div>
      <button id="insertbtn">插入</button>
      <script>
        $(function() {
          $('#insertbtn').click(function() {
            $('#textdiv').focus();
            var str = "插入的内容";
            _insertimg(str);
          });
          $('#textdiv').bind({
           keyup:saveRange,
           mouseup: saveRange,
           change: saveRange
          })
        });
        var _range;
        function saveRange() {
          var selection = window.getSelection ? window.getSelection() : document.selection;
          var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
          _range = range;
        }
        //锁定编辑器中鼠标光标位置。。
        function _insertimg(str) {
          if (!window.getSelection) {
            $('#textdiv').focus();
            var selection = window.getSelection ? window.getSelection() : document.selection;
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
          } else {
            $('#textdiv').focus();
            var selection = window.getSelection ? window.getSelection() : document.selection;
            selection.addRange(_range);
            range = _range;
            // var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            range.collapse(false);
            var hasR = range.createContextualFragment(str);
            var hasR_lastChild = hasR.lastChild;
            while (hasR_lastChild&&hasR_lastChild.nodeName.toLowerCase()=="br"&&hasR_lastChild.previousSibling&&
              hasR_lastChild.previousSibling.nodeName.toLowerCase()=="br") {
              var e = hasR_lastChild;
              hasR_lastChild = hasR_lastChild.previousSibling;
              hasR.removeChild(e)
            }
            range.insertNode(hasR);
            if (hasR_lastChild) {
              range.setEndAfter(hasR_lastChild);
              range.setStartAfter(hasR_lastChild)
            }
            selection.removeAllRanges();
            selection.addRange(range)
          }
        }
      </script>
    </body>
    </body>
    </html>

您可以修改框中代码后运行查看

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇ajax加载html和里面的js文件
上一篇爱情，从来不是天道酬勤

发表评论：

知向前端

div模拟textarea在光标位置插入数据代码示例

input、textarea在光标位置插入数据示例

div模拟textarea在光标位置插入数据代码示例

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

存档

随机文章

最新文章

热门文章

友情链接