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

2016-3-12 Jon

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

<br />
    <!DOCTYPE html><br />
    <html lang="en"><br />
    <head><br />
      <meta charset="UTF-8"><br />
      <title>textarea在光标位置插入数据示例</title><br />
      <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br />
    </head><br />
    <body><br />
      <button id="ch_button" value="插入">插入</button><br />
      <input name="content" id="test_in" style="width:80%"/><br />
      <script><br />
        $(function() {<br />
          /* 在textarea处插入文本--Start */<br />
          $.fn.extend({<br />
            insertContent: function(myValue, t) {<br />
              var $t = $(this)[0];<br />
              if (document.selection) { // ie<br />
                this.focus();<br />
                var sel = document.selection.createRange();<br />
                sel.text = myValue;<br />
                this.focus();<br />
                sel.moveStart('character', -l);<br />
                var wee = sel.text.length;<br />
                if (arguments.length == 2) {<br />
                  var l = $t.value.length;<br />
                  sel.moveEnd("character", wee + t);<br />
                  t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);<br />
                  sel.select();<br />
                }<br />
              }else if($t.selectionStart || $t.selectionStart == '0') {<br />
                var startPos = $t.selectionStart;<br />
                var endPos = $t.selectionEnd;<br />
                var scrollTop = $t.scrollTop;<br />
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);<br />
                this.focus();<br />
                $t.selectionStart = startPos + myValue.length;<br />
                $t.selectionEnd = startPos + myValue.length;<br />
                $t.scrollTop = scrollTop;<br />
                if (arguments.length == 2) {<br />
                  $t.setSelectionRange(startPos - t, $t.selectionEnd + t);<br />
                  this.focus();<br />
                }<br />
              }else{<br />
                this.value += myValue;<br />
                this.focus();<br />
              }<br />
            }<br />
          })<br />
        });<br />
        $(document).ready(function() {<br />
          $("#ch_button").click(function() {<br />
            $("#test_in").insertContent("<upload/day_140627/201406271546349972.jpg>");<br />
          });<br />
        });<br />
      </script><br />
    </body><br />
    </html><br />

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

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

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

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

发表评论：