Неправильная позиция каретки при вложении элементов в редактируемый элемент содержимого

Question

Неправильная позиция каретки при вложении элементов в редактируемый элемент содержимого

0

В настоящее время я работаю над проектом, который после нажатия кнопки div вставляется в редактируемый контент div в позиции каретки.

У меня есть общий механизм работы, однако в chrome (я еще не тестировал еще один браузер) после того, как я вставляю новый div и кликаю область редактирования контента и нажимаю на область, чтобы добавить больше текста, курсор выравнивается вправо стороне области редактирования контента.

Если я продолжаю печатать, пока курсор находится над текстом, текст будет рядом с div, как ожидалось, и удалит правильно, когда будет нажата обратная сторона.

Вот мой javascript:

createVar = function () {
    var variable = document.createElement('div'),
    nested   = document.createElement('div');

    variable.className = 'msg_var';
    variable.spellcheck = false;
    variable.contentEditable = false;

    nested.className = "msg_var_content";
    nested.innerHTML = "foobar";

    variable.appendChild(nested);
    nested = document.createElement('div');
    nested.className = 'msg_var_remove';
    nested.innerHTML = 'x';
    variable.appendChild(nested);
    nested.setAttribute(
        'onclick',
        'this.parentNode.parentNode.removeChild(this.parentNode);'
    );
    return variable;
}

addVar = function () {
    var body     = document.getElementById('body'),
        variable = createVar(),
        range,
        sel;

    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            range.insertNode(variable);

            range = range.cloneRange();
            range.selectNodeContents(variable);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } 
}

Я создал jsfiddle, чтобы помочь описать мою ситуацию: http://jsfiddle.net/6XAfv/3/

Кто-нибудь знает, почему курсор перемещается, когда я вставляю div? Как сохранить курсор рядом с div?

ToastyStarfish 14 март 2014, в 02:21

Источник

1

Caret не carrot
jasonscript 14 март 2014, в 02:03
0

Это похоже на морковку. :)
wersimmon 14 март 2014, в 03:14
0

мой плохой, обновил пост
ToastyStarfish 14 март 2014, в 07:29

Показать ещё 1 комментарий

Теги:

javascript

html

html5

contenteditable

1 ответ

Ещё вопросы

usbecko · Answer 1 · 2014-03-28T11-37-00.000Z

Это ошибка в Google Chrome и сафари. В firefox он работает правильно. Я провожу время, выясняя, как это исправить.

Мое решение состоит в том, что вам нужно обернуть contenteditable в другую оболочку. Так что карет будет в конце внутреннего контента.

<div id="body">
    <div id="editable" contenteditable="true">
        <span>&nbsp</span>
    </div>
</div>

Нам нужно иметь внутри, чтобы мы могли сосредоточить внутренний контент.

Во-первых, проверьте, является ли браузер Chrome или Safari, если так добавить стиль.

is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
if(is_chrome && is_safari) is_safari = false;
    if(is_chrome || is_safari){
         var element = document.getElementById('element');
         element.style.display = 'inline-block';
         element.style.width = 'auto';
    }

Тогда все, что вам нужно сделать, это сосредоточить внимание на контенте и настроить каретку в конце текста.

contentFocus = function(){
    setTimeout(function(){
        document.getElementById('editable').focus(); 
    }, 100);
}

здесь я отредактировал ваш пример http://jsfiddle.net/6XAfv/4/, он не работает отлично, но вы можете легко заставить его работать с исправлениями фокуса.

Надеюсь это поможет.