редактируемая позиция курсора - PullRequest
Новая
       7

редактируемая позиция курсора

3 голосов
/ 29 августа 2011

У меня есть div, который редактирует содержимое, и я хочу нажать на кнопку редактирования, и курсор появляется в начале div, в ту минуту, когда он появляется в конце.

<li style="display: list-item;" class="menu-item" contenteditable="true">
<div class="">Dior<input type="checkbox" name="selected"></div>
<ol class="">
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/charlize-theron" class="" name="">Charlize-Theron</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/natalie-portman" class="" name="">Natalie-Portman</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="">
    <div class=""><a href="/portfolios/sharon-stone-1" class="" name="">Sharon-Stone</a>
    <input type="checkbox" name="selected"></div>
    </li>
</ol>
<a href="#" class="edit" style="opacity: 1; ">Edit</a></li>

Таким образом, когда вы нажимаете на редактирование в минуту, вы должны вернуться к началу, чтобы редактировать Dior (единственное, что действительно редактируется).но я пытался добавить редактируемый код содержимого только в div, и он не работает.

Вот некоторые из моих jQuery 

$(".edit").click(function(){
            $(this).parent().children("div").focus(function(){

            });
        });

        $(".edit").hover(function(){
            $(this).css("opacity","0.5")
        }, function(){
            $(this).css("opacity","1")
        });

        $(".edit").parent().blur(function(){
            var sortableList = $(".sortable").html();
            $("#ItemDescription").val(sortableList);
        });

function storeUserScribble(id) {
                var scribble = $("li div").text();
                localStorage.setItem('userScribble',scribble);
              }

              function getUserScribble() {
                if ( localStorage.getItem('userScribble')) {
                  var scribble = localStorage.getItem('userScribble');
                }
                else {
                }
              }

              function clearLocal() {
                clear: localStorage.clear();
                return false;
              }

Если кто-то может пролить свет на то, почемукурсор не находится на передней части div автоматически, что может помочь.Я хотел бы установить позицию курсора на начало IE перед DIOR.

Спасибо за помощь!

Ответы [ 2 ]

5 голосов
/ 29 августа 2011

jsFiddle: http://jsfiddle.net/X6Ab8/

Код: 

$(".edit").click(function(e) {
    e.preventDefault();

    var div = $(this).parent().children("div")[0];
    div.focus();

    if (window.getSelection && document.createRange) {
        // IE 9 and non-IE
        var sel = window.getSelection();
        var range = document.createRange();
        range.setStart(div, 0);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        // IE < 9
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(div);
        textRange.collapse(true);
        textRange.select();
    }
});
1 голос
/ 29 августа 2011

Проверка: Установка позиции курсора для contentEditable

Кроме IE, проверьте также document.selection.createRange.

...