как изменить поведение блокируемых контентов после нажатия на Enter в различных браузерах - PullRequest
Новая
       34

как изменить поведение блокируемых контентов после нажатия на Enter в различных браузерах

29 голосов
/ 29 апреля 2010

При нажатии ввод в <div contenteditable="true"> </div> в Firefox <br /> производится - это нормально Но в Chrome или IE создается новый <div> или <p>. Что я должен сделать, чтобы Chrome и IE вели себя как Firefox.

Ответы [ 5 ]

25 голосов
/ 18 марта 2013

Как сказал Дуглас ранее, браузеры пытаются клонировать предыдущий тег, когда клиент начинает новый абзац на редактируемой странице. Несоответствие возникает, когда браузеру нечего отступать - например, когда изначально тело страницы пусто В этом случае разные браузеры ведут себя по-разному: IE начинает заключать каждую строку в тег

, Chrome переносит каждую строку в

.

Чтобы улучшить взаимодействие между браузерами, разработчики WebKit ввели команду DefaultParagraphSeparator . Вы можете использовать следующий JavaScript при загрузке страницы для Chrome, чтобы изменить разделитель абзацев по умолчанию на

tag: 

document.execCommand('defaultParagraphSeparator', false, 'p');
14 голосов
/ 16 августа 2010

Следующее добавит <br>, когда клавиша ввода нажата во всех основных браузерах и попытается поместить каретку сразу после нее. Однако у WebKit, Opera и IE возникают проблемы с правильным размещением каретки после <br>, что не пытается исправить следующий код. 

function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }

        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

var el = document.getElementById("your_editable_element");

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keypress", enterKeyPressHandler, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeypress", enterKeyPressHandler);
}
8 голосов
/ 25 июля 2011

Отличные ссылки находятся здесь на contenteditable.

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Что приводит к действительно хорошему API здесь http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/ http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-2/

Если вы готовы потратить от 30 минут до часа, чтобы прочитать все это, вам совершенно не нужно будет использовать какой-нибудь дрянной сторонний редактор, такой как tinyMCE или ckeditor, или что-то еще, вы можете создать и настроить его самостоятельно и быть честным проще и быстрее сделать это с нуля, чем справляться со всеми ненужными и ненужными API стороннего редактора WYSIWYG.

3 голосов
/ 18 августа 2010

Если вы предпочитаете быть счастливым, а не гоняться за ошибками :-) было бы гораздо лучше попытаться заставить FF также использовать p или div. Не только потому, что это оказалось большинством голосов :-)

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

В зависимости от вашего реального приложения, возможно, стоит попытаться поместить div с полностью сформированным стилем и определенно с некоторым начальным содержимым - если вы видели страницы, на которых вы видите затененный текст типа «введите свой комментарий здесь», и он исчезает второе нажатие (или remians - это дизайнерское решение).

Причиной этой части является то, что семантика «contenteditable» заключается в том, что «у него уже есть контент => браузер имеет достаточно информации, чтобы знать, что делать», поэтому браузеры делают все возможное, чтобы что-то делать, когда они сталкиваются с отсутствующим контентом. ситуация гораздо более случайная.

2 голосов
/ 16 августа 2010

Я считаю, что если в div уже есть тег абзаца, и пользователь нажимает клавишу возврата, когда фокус находится внутри тега абзаца, тогда Firefox вставит еще один. Итак, если у вас есть это: 

<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

и вы сосредоточитесь, нажмите клавишу возврата, Firefox вставит третий абзац.

Возможно, вам удастся обойтись с помощью & nbsp ; в тегах абзаца, указав им минимальную высоту, и вам, возможно, удастся обойтись только с одним. Я никогда не доходил до сути поведения к своему удовлетворению, когда в последний раз смотрел на это. Вероятно, вам понадобится немного JavaScript, чтобы использовать как минимум один тег абзаца внутри div.

...