彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > JS在可编辑的div中的光标位置插入内容的方法

JS在可编辑的div中的光标位置插入内容的方法

发布时间:2019-08-31 22:22编辑:学会党委浏览(151)

    JS在可编辑的div中的光标位置插入内容的方法

     首先要让DIV启用编辑模式

    代码如下:

    <div contenteditable=true id="divTest"></div>

    通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。
    不扯话题了。下面说怎么获取或设置光标位置.

     

    2个步骤:

    ① 获取DIV中的光标位置
    ② 改变光标位置

    代码如下:

    var cursor = 0; // 光标位置 
    document.onselectionchange = function () {
    var range = document.selection.createRange();
    var srcele = range.parentElement();//获取到当前元素
    var copy = document.body.createTextRange();
    copy.moveToElementText(srcele);
    for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {
     copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量.
    }
    }

    给document绑定光标变化事件。用来记录光标位置.
    这样就可以拿到DIV的光标位置了.

    代码如下:

    function moveEnd(obj) {
    lyTXT1.focus();
    var r = document.selection.createRange();
    //因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了
    r.moveStart('character', lyTXT1.innerText.length - cursor);
    r.collapse(true);
    r.select();
    }

    通过上面的我们就可以将DIV中的光标移动到最后面了
    一个完整的实例

    复制代码 代码如下:

    <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button>
    <div contentEditable="true" style="height:50px; border:2px solid red;" id="test"> </div>
     
    function insertHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
    range = sel.getRangeAt(0);
    range.deleteContents();
    // Range.createContextualFragment() would be useful here but is
    // non-standard and not supported in all browsers (IE9, for one)
    var el = document.createElement("div");
    el.innerHTML = html;
    var frag = document.createDocumentFragment(), node, lastNode;
    while ( (node = el.firstChild) ) {
    lastNode = frag.appendChild(node);
    }
    range.insertNode(frag);
    // Preserve the selection
    if (lastNode) {
    range = range.cloneRange();
    range.setStartAfter(lastNode);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }
    } else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
    }
    }

     

    再看一个基于jquery的实例

     代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script type="text/javascript" src=";
    <title>contenteditable</title>
    <style>
    *{
     margin:0;padding:0;
    }
    .im-message-area{
     width:98%;
     padding:2px;
     height:75px;
     border:#000 solid 1px;
     background:#fff;
     font:12px/20px arial,"5b8b4f53";
     word-wrap:break-word;
     overflow-y:auto;
     line-height:1;
    }
    .ul{display:none;}
    .ul li{
     background-color:#CCC;
     width:50px;
    }
    </style>
    <script language="javascript" type="text/javascript">
    function inimage(text){
     var obj= $(".im-message-area")[0];
     var range, node;
     if(!obj.hasfocus) {
      obj.focus();
     }
        if (window.getSelection && window.getSelection().getRangeAt) {
            range = window.getSelection().getRangeAt(0);
      range.collapse(false);
            node = range.createContextualFragment(text);
      var c = node.lastChild;
            range.insertNode(node);
      if(c){
       range.setEndAfter(c);
       range.setStartAfter(c)
      }
      var j = window.getSelection();
      j.removeAllRanges();
      j.addRange(range);
     
        } else if (document.selection && document.selection.createRange) {
            document.selection.createRange().pasteHTML(text);
        }
    }
    $(document).ready(function(){
     $('#button').click(function(){
      $('.ul').show();
     })
     $('.ul li').each(function(){
      $(this).click(function(){
       inimage($(this).text());
      })
     })
    });
    </script>
    </head>
    <body>
     <div contenteditable="true" id="im_message_area" class="im-message-area"><br></div>
     <a href="javascript:void(0)" id="button">按钮</a>
     <ul class="ul">
      <li>(笑)</li>
      <li>(哭)</li>
      <li>(乐)</li>
     </ul>
    </body>
    </html>

    首先要让DIV启用编辑模式 代码如下: div contenteditable=true id=divTest/div 通过设定contenteditable=true开...

    相关文章

    相关搜索:

    今天看啥

    搜索技术库

    返回首页

    • 在WebAPI使用Session,WebAPI使用Session
    • mvc 分部视图(Partial)显示登陆前后变化以及S
    • 在多台PC之间同步Resharper所有设置的方法,
    • MySqlDataReader在Using中使用,mysqldatareader
    • The CLR’S Execution Model,clrexecution
    • Microsoft Windows 服务(1) C#创建Windows Service,

    相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

    帮客评论

    本文由彩世界平台发布于学会党委,转载请注明出处:JS在可编辑的div中的光标位置插入内容的方法

    关键词: