Question

我正在使用Javascript的onkeyup事件将输入contenteditable div的文本输入到输入字段中。

当用户输入div时，他们可以选择将所选文本设为粗体或斜体（通过突出显示所需文本并单击其中一个按钮来完成）。

如果用户在div中输入'hello'并使文本变为粗体，则它将在输入字段中显示为hello（单词周围没有<br>标记。）
如果用户在div中键入“hello”并将文本设为粗体，然后按空格键，则会在输入字段中显示为<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上更新，您应该将更新输入的代码移动到命名函数，以便您可以在keyup和style按钮上单击它。

$(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

我建议你在div＃post而不是execCommand

中注入一个类名

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

html元素仅出现在空格

2 个答案: