html элементы появляются только после пробела

Question

Я использую событие Javascript onkeyup, чтобы ввести текст, введенный в поле ввода contenteditable, в поле ввода.

Когда пользователь вводит в div, у них есть возможность сделать выделенный текст полужирным или курсивом (это делается путем выделения нужного текста и нажатия одной из кнопок).

• Если пользователь «привет» в DIV и делает текст жирным, он будет отображаться как hello в поле ввода (без <br> тегов вокруг слова).
• Если пользователь вводит «привет» в div и делает текст полужирным, затем нажимает пробел, он будет отображаться как <b>hello</b> в поле ввода.

Как сделать так, чтобы html-теги автоматически отображались вокруг слов, не нажимая клавишу пробела?

<form method="post"> 
<button type="button" id="bold"><b>B</b></button> 
<button type="button" id="italic"><i>I</i></button> 
<div id="post" style="border: 1px solid;" contenteditable></div> 
<input type="text" name="hiddenTextarea" id="hiddenTextarea"> 
<input type="submit"> 
</form> 

<script> 
$(document).ready(function() { 
    $('#bold').click(function() { 
    document.execCommand('bold'); 
    }); 
}); 

$(document).ready(function() { 
    $('#italic').click(function() { 
    document.execCommand('italic'); 
    }); 
}); 

var contentText = document.getElementById('post'); 
var hiddenInput = document.getElementById('hiddenTextarea'); 

// copy the text to input when the user writes in contentText div 
contentText.onkeyup = function() { 
    hiddenInput.value = this.innerHTML; // 'this' is pointing to contentText 
}; 
</script> 

Вот JsFiddle, так что вы можете увидеть проблему для себя: https://jsfiddle.net/u6oeu9dL/1/

Answer 1

вход только получает обновленный по keyup, вместо этого вы должны переместить код, который обновляет ввод к именованной функции, чтобы вы могли называть его нажатием клавиши и кнопкой стиля.

$(document).ready(function() { 
    $('#bold').click(function() { 
    document.execCommand('bold'); 
    updateInput(); 
    }); 
}); 

$(document).ready(function() { 
    $('#italic').click(function() { 
    document.execCommand('italic'); 
    updateInput(); 
    }); 
}); 

var contentText = document.getElementById('post'); 
var hiddenInput = document.getElementById('hiddenTextarea'); 

function updateInput() { 
    hiddenInput.value = contentText.innerHTML 
} 

// copy the text to input when the user writes in contentText div 
contentText.onkeyup = updateInput; 

https://jsfiddle.net/u6oeu9dL/5/(упрощенный)

Answer 2

Я хотел бы предложить вам вводить имя класса в сНу # пост вместо ExecCommand

.bold { font-weight: bold; } 
.italic { font-style: italic; }