contentEditable-тег Firefox

Firefox вставляет <br /> тег при нажатии enter, в то время как другие браузеры добавляют либо <p> или <div>. Я знаю, что chrome и safari вставляют один и тот же тег первенца contentEditable div. Так же, как Firefox, однако, если innerHTML первого тега пуст, firefox просто игнорирует тег и создает новую строку, нажимая узел по умолчанию во второй строке и пишет непосредственно внутри редактора, а не внутри дочернего узла. Так что в принципе, я хочу, чтобы Firefox напишите внутри данного тега и продолжайте вставлять этот узел при каждом нажатии на enter. Как это можно сделать? Есть предложения?

8
contenteditable enter firefox javascript

2 ответов

Я нашел решение :) чтобы сделать эту работу, вы должны дать идентификатор родительскому элементу каретки. Затем можно использовать следующий код. Обратите внимание, что я получаю browsernName из c# и помещаю его в скрытое поле. Вот почему я сравнил его с "firefox". Следующий код протестирован с FF 3.6, и он отлично работает. Единственное, что вам нужно будет проверить родительский элемент каретки, и если он не равен идентификатору текущей строки, вам придется поместить каретку внутрь текущую строку с помощью функции выбора. Кроме того, выполните этот код на событии keyup и убедитесь, что если вы выполняете некоторые другие коды на событии keyup, поместите этот код в конце его! Anways, наслаждайтесь :)

// The code works good in the following cases:
// 1) If there is text inside the editor and the user selects the whole text
//    and replace it with a single character, the <p> tag will be placed and the
//    text will place inside the p tag
// 2) If the user selects the whole code and deletes it and begins to type again
// 3) If the user types normally and press enter 
// NB: Please note me if you find any bug

if (browserName == "firefox") {
    //remove all br tags
    var brs = txteditor.getElementsByTagName("br");
    for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
    //check whether there is a p tag inside
    var para = txteditor.getElementsByTagName("p");
    if (para.length == 0) {
        var inner = txteditor.innerHTML.replace(/^\s+|\s+$/g, '');
        var str = (inner == "") ? "&#8203;" : txteditor.innerHTML;
        var nText = "<p id=\"" + cRow + "\">" + str + "</p>";
        // in order to prevent a dublicate row clear inside the text editor
        txteditor.innerHTML = "";
        document.execCommand('insertHTML', false, nText);
    } else {
        // always make sure that the current row's innerHTML is never empty
        if (document.getElementById(cRow).innerHTML == "")
            document.getElementById(cRow).innerHTML = "&#8203;";
    }
}
3

попробуйте вставить <p></p> внутри элемента. Тогда почти наверняка каждая новая строка будет новым абзацем.

2