为什么我无法在具有“contenteditable”属性的 HTML 按钮文本中添加空格？

Question

我有一个 HTML 按钮，我希望用户双击时能够更改按钮的文本。

<button onclick='doStuff()' ondblclick='renameButton()' id='myButton'>Click Me</button>

这是我在 JavaScript 中的函数：

function renameButton() {
  var button = document.getElementById('myButton');
  button.setAttribute("contenteditable", true);
}//end renameButton 

此功能允许我编辑按钮：

问题 1)编辑按钮时无法添加空格。我键盘上的空格键实际上没有任何作用。

问题2）是否可以在可编辑文本上设置白色背景，以便用户看到它是可编辑的？据我所知，只能控制整个按钮元素的背景颜色，而不能控制文本节点。

Answer 1

如果您想确保将空格输入到内容中，则需要放置一个 span 类型的元素来保存按钮内的文本。

在按钮上，空格是按下按钮的触发器，因此不能添加到具有 contenteditable 属性的文本中。

在这里查看它的工作原理： https: //jsfiddle.net/mwwj1jty/2/

超文本标记语言

<button onclick='doStuff()' ondblclick='renameButton()' id='myButton'><span id="myspan">Click Me</span></button>

脚本语言

function renameButton() {
  var span = document.getElementById('myspan');

  span.setAttribute("contenteditable", true);
  span.style.backgroundColor = "red";
}//end renameButton