Приемлемый тег абзаца при вводе

Question

Мне было интересно, есть ли приемлемый способ заставить все основные браузеры вставлять тег абзаца вместо тега по умолчанию, который они вставляют при нажатии клавиши ввода, когда contentEditable имеет значение true.

Насколько я знаю IEвставляет p автоматически.Но Google Chrome вставляет тег div, а Firefox вставляет br (WTF ?!).

Заранее спасибо!

Answer 1

вы можете использовать document.execCommand('formatBlock', false, 'p'); в таких событиях, как keypress или keydown и т. Д., Чтобы использовать абзацы после ввода. Например:

element.addEventListener('keypress', function(ev){
    if(ev.keyCode == '13')
        document.execCommand('formatBlock', false, 'p');
}, false);

Answer 2

У меня была такая же проблема, и я нашел решение (CHROME, MSIE, FIREFOX), следуйте по моему коду в ссылке.

$(document).on('click','#myButton',function() {
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
        var str = $('#myDiv').html().replace(/<br>/gi,'').replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');
    else if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
        var str = $('#myDiv').html().replace(/<\/br>/gi,'').replace(/<br>/gi,'<br>').replace(/<\/br>/gi,'');
    else if (navigator.userAgent.toLowerCase().indexOf("msie") == -1)
        var str = $('#myDiv').html().replace(/<br>/gi,'').replace(/<p>/gi,'<br>').replace(/<\/p>/gi,'');    
    $('#myDiv2').removeClass('invisible').addClass('visible').text(str);
    $('#myDiv3').removeClass('invisible').addClass('visible').html(str);
});

https://jsfiddle.net/kzkxo70L/1/

Answer 3

Как встроенная в браузер, вы не можете изменить это поведение.Вы можете обойти, обнаружив браузер и заменив элементы соответственно.Очень страшно, я знаю.

Также проверьте WhatWG для фона: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031577.html