Question

我想知道是否有一种可接受的方式强制所有主流浏览器插入段落标记，而不是当contentEditable为true时插入按Enter键时插入的默认标记。

据我所知，IE会自动插入p。但谷歌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

由于它在浏览器中的构建，您无法改变该行为。您可以通过检测浏览器并相应地替换元素来解决问题。非常难看，我知道。

同时检查WhatWG的背景：http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-May/031577.html

Answer 3

我遇到了同样的问题并找到了解决方案（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/

输入可信的段落标签

3 个答案: