为什么我不能将 space 添加到具有 '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)编辑按钮时无法添加 space。我键盘上的 space-bar 确实什么也没做。

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

Answer 1

您可以在文本所在的按钮内放置一个 span，然后更改 span 的背景颜色，如图所示 https://jsfiddle.net/msoLg3qb/

HTML

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

CSS

span {
  background-color: white;
}
button {
  background-color: green;
}

JAVASCRIPT

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

Answer 2

如果您想确保 SPACE 被送入内容，您需要放置一种 span 类型的元素来保存按钮内的文本。

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

看到它在这里工作：https://jsfiddle.net/mwwj1jty/2/

HTML

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

JAVASCRIPT

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

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

Answer 3

不要为此使用 button 元素，因为您会看到存在限制。当按钮处于活动状态时，按下 SPACE 键会启动 click 事件。要解决这个问题，请使用不同的元素，span 在这里是完美的。

我也按照你的要求添加了背景颜色。

最后，不要使用内联 HTML 事件属性（onclick 等）。那是一门古法，就是不死却有many reasons not to use it. Instead, follow modern standards and use .addEventListener().

// Get a reference to the button
var spn = document.getElementById("myButton");

// Set up your event handlers in JavaScript, not in HTML
spn.addEventListener("click", doStuff);
spn.addEventListener("dblclick", renameButton);
spn.addEventListener("blur", saveName);

function renameButton() {
  spn.contentEditable = "true";
  spn.classList.add("edit"); 
}

function saveName(){
  spn.contentEditable = "false";
  spn.classList.remove("edit");
}

function doStuff(){
  
}

/* Make span look like a button */
.button {
  display:inline-block;
  padding:5px 20px;
  border:1px solid grey;
  background-color:green;
  border-radius:2px;
  cursor:pointer;
  box-shadow:1px 1px 1px grey;
  color:white;
  user-select:none;
}

/* Make span feel like a button */
.button:active {
  box-shadow:-1px -1px 1px white;
}

/* Style to add while content is editible */
.edit { 
   background-color:white; 
   color:black;
}

<span id='myButton' class="button">Click Me</span>

为什么我不能将 space 添加到具有 'contenteditable' 属性的 HTML 按钮的文本中？

Why can I not add a space to the text of a HTML button with the 'contenteditable' attribute?

html

javascript

css

element

button