jquery Ustawianie pozycji kursora w contenteditable div

Question

Stara wersja pytania znajduje się poniżej, po dalszych badaniach postanowiłem zmienić zdanie. Problem, jak wcześniej, muszę skupić contenteditable div bez podkreślania tekstu, dzięki czemu fokus podkreśla tekst w Chrome.

Zdaję sobie sprawę, że ludzie rozwiązali ten problem w tekstach, resetując pozycję karetki w obszarze tekstowym. Jak mogę to zrobić za pomocą elementu contenteditable? Wszystkie wtyczki, które wypróbowałem, działają tylko z tekstami. Dzięki.

Old frazowania z pytaniem:

Mam contenteditable element, który chcę się skupić, ale tylko w zakresie aby umieścić kursor na przodzie pierwiastka, a wybierając wszystko.

elem.trigger('focus'); z jquery zaznacza cały tekst w całym elemencie w chrome. Firefox zachowuje się prawidłowo , ustawiając karetkę na przedniej stronie tekstu. Jak mogę uzyskać Chrome, aby zachowywało się tak, jak chcę, lub czy nie jest to, na co mogę się skupić dla .

Dzięki wszystkim.

Answer 1

demo: http://so.devilmaycode.it/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> 

• UWAGA: wykorzystują rangy.js https://code.google.com/p/rangy/

Answer 2

Tak to się dzieje, ponieważ użyłeś

elem.trigger('focus'); 

spróbuj użyć klasy lub zidentyfikować element, na którym chcesz strzelać zdarzenia wyzwalającego.

Answer 3

Może błędnie odczytuję pytanie, ale czy nie zrobiłbym tego (zakładając, że można edytować <div> z identyfikatorem "edytowalny")? Czasomierz jest tam, ponieważ w Chrome, zachowanie przeglądarka rodzimy że wybiera cały element, wydaje się wyzwolić po zdarzeniu focus, co nadrzędne efekt kodu wyboru chyba przełożone po zdarzeniu ostrości:

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(); 

Answer 4

udało mi aby rozwiązać ten problem po trochę szturchania DOM.

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

To działa chyba tylko na przeglądarkach WebKit, ale ponieważ jest to jedyne źródło problemu, dodałem warunkową (jQuery)

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

nadzieję, że to rozwiąże problem.

Answer 5

Ustaw kursor w pozycji wstępnej lub div tagu:

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>

Źródło: https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5