jquery在contenteditable div中设置光标位置

5 回答

• 3

  demo：http：//so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/

  <div id="editable" contentEditable="true">
              <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
                 amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean.
          </div>
  

  ---

  <script type="text/javascript">
          $(function () {
              $('[contentEditable="true"]').on('click', function (e) {
                  if (!$(this).hasClass('editing')) {
                      var html = $(this).html();
                      if (html.length) {
                          var range = rangy.createRange();
                          $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>');
                          var $last = $(this).find('.content-editable-wrapper');
                          range.setStartAfter($last[0]);
                          range.collapse(false);
                          rangy.getSelection().setSingleRange(range);
                      }
                  }
              }).on('blur', function () {
                  $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap();
              });
          });
      </script>
  

  • NOTE: 使用rangy.js https://code.google.com/p/rangy/

  回复于 2024-04-28T02:30:08+08:00
• 0

  也许我'm misreading the question, but wouldn' t以下做（假设一个可编辑的 <div> ，id为"editable"）？计时器在那里，因为在Chrome中，选择整个元素的本机浏览器行为似乎在 focus 事件之后触发，从而覆盖选择代码的效果，除非推迟到焦点事件之后：

  var div = document.getElementById("editable");
  
  div.onfocus = function() {
      window.setTimeout(function() {
          var sel, range;
          if (window.getSelection && document.createRange) {
              range = document.createRange();
              range.selectNodeContents(div);
              range.collapse(true);
              sel = window.getSelection();
              sel.removeAllRanges();
              sel.addRange(range);
          } else if (document.body.createTextRange) {
              range = document.body.createTextRange();
              range.moveToElementText(div);
              range.collapse(true);
              range.select();
          }
      }, 1);
  };
  
  div.focus();
  

  回复于 2024-04-28T02:30:08+08:00
• 20

  是的，因为你已经习惯了

  elem.trigger('focus');
  

  尝试使用类或标识要触发触发器事件的元素 .

  回复于 2024-04-28T02:30:08+08:00
• 1

  在围绕DOM进行一些讨论之后，我设法解决了这个问题 .

  elm.focus();
  window.getSelection().setPosition(0);
  

  它可能只适用于WebKit浏览器，但由于它是问题的唯一来源，我添加了一个条件（使用jQuery）

  if(!$.browser.webkit) {
      elm.focus();
  } else {
      elm.focus();
      window.getSelection().setPosition(0);
  }
  

  希望这能解决你的问题 .

  回复于 2024-04-28T02:30:08+08:00
• 29

  在pre或div标签中设置指针位置：

  function setCursor(pos) {
      var el = document.getElementById("asd");
      var range = document.createRange();
      var sel = window.getSelection();
      range.setStart(el.childNodes[0], pos);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
      el.focus();
  }
  
  $('button').click(function () {
      setCursor(5);
  });
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="asd" contenteditable="true" >
  asd
  two
  </div>
  <button>Set caret position</button>
  

  资料来源：https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5

  回复于 2024-04-28T02:30:08+08:00