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

Question

I have a button in HTML and I want the user to be able to change the button's text when double clicking.

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

This is my function in JavaScript:

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

This function allows me to edit the button:

Issue 1) I cannot add a space when editing the button. The space-bar on my keyboard literally does nothing.

Issue 2) Is it possible to set a white background on the editable text to allow the user to see that it is editable? As far as I know, it is only possible to control the background color of the entire button element, but not the text node.

Answer 1

You need to put a span kind of element to hold the text inside the button if you want to make sure SPACE is fed into the content.

On a button, space is a trigger for button press and hence can't be added in to the text with contenteditable attribute.

See it working here: 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 2

You could put a span inside the button where the text is, and change the background-color of the span instead as seen here 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 3

Don't use a button element for this, as you can see that there are limitations. When a button is active, pressing the SPACE key initiates a click event. To get around this, use a different element, a span would be perfect here.

I've also added the background color as you asked about.

Lastly, don't use inline HTML event attributes (onclick, etc.). That's an ancient technique that just will not die but has 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>