Contenteditable добавляет, когда я ударяю место

Я не уверен, почему, но если у вас есть элемент с включенным contenteditable, при первом вводе пробела он добавит тег <br> в элемент. Если элемент по умолчанию имеет пробел (<p contenteditable="true">this is a test</p>), все будет хорошо, но как только пользователь ударит эту пробел (или даже скопирует + вставляет пробел), Firefox добавляет <br _moz_dirty="" /> к <p>.

Кто-нибудь знает, почему или просто исправить? Это мой первый раз, когда я играю с довольными, так что многие из них для меня новы. На данный момент я просто использую $('br').remove(), который, кажется, работает, но я бы хотел объяснить и надлежащим образом предотвратить его, если кто-нибудь знает.

Ответы

Ответ 1

Я использую preventDefault когда пользователь делает возврат каретки. Возможно, вы могли бы изменить его так, чтобы он возвращал обычный пробел, когда пользователь использует клавишу пробела.

if(e.keyCode==13 && e.shiftKey){ //enter && shift
    e.preventDefault(); //Prevent default browser behavior
    //this.html(this.html+"<br>");
}
if(e.keyCode==13){ //enter
    e.preventDefault(); //Prevent default browser behavior
}

Ответ 2

Я столкнулся с этим сегодня и также не знаю, почему Firefox делает это. Я имел дело с этим, как это.

function zapTrailingLinebreak (editableNode) {
    let children = Array.from(editableNode.childNodes)

    children.forEach(child => {
        if (children.indexOf(child) == children.length - 1) {
            if (child.tagName && child.tagName === "BR") {
                editableNode.removeChild(child)
            }
        } 
    })
}