jquery Установка позиции курсора в контентном значении div

Question

Старая версия вопроса ниже, после исследования большего количества, я решил перефразировать вопрос. Проблема по-прежнему заключается в том, что мне нужно сфокусировать контент-контент, не выделяя текст, делая прямое фокус, выделяя текст в Chrome.

Я понимаю, что люди решили эти проблемы в текстовых средах, сбросив положение каретки в текстовое поле. Как я могу сделать это с помощью элемента contenteditable? Все плагины, которые я пробовал, работают только с текстовыми полями. Благодарю.

Старый Фразировка вопроса:

У меня есть contenteditable элемент, который я хочу сосредоточиться, но лишь постольку, поскольку , чтобы поместить курсор на передней панели элемента, а выбор все.

elem.trigger('focus'); с jQuery выбирает весь текст целиком элемент в хром. Firefox корректно ведет , устанавливая каретку на перед текстом. Как я могу получить Chrome, чтобы вести себя так, как я хочу, или фокус, возможно, не то, что я ищу для.

Спасибо всем.

Answer 1

демо: 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> 

• ПРИМЕЧАНИЕ: делают использование rangy.js https://code.google.com/p/rangy/

Answer 2

Да это происходит потому, что вы использовали

elem.trigger('focus'); 

попробовать использовать класс или определить элемент, на котором вы хотите, чтобы стрелять событие триггера.

Answer 3

Возможно, я неверно истолковал вопрос, но не сделал бы следующее (при условии, что редактируемый <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(); 

Answer 4

мне удалось для решения этой проблемы после некоторого разговора по DOM.

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

Это возможно, работает только на WebKit браузерах, но так как он является единственным источником проблемы, я добавил условный (с помощью JQuery)

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

Надеется, что это решает проблему.

Answer 5

Установить положение курсора в предварительно или сНе тега:

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