Spacebar "doesn't work" in `button` element when i use the HTML5 `contenteditable`. How can i get it to working?

Question

Spacebar does not work in button element when i use the HTML5 contenteditable. But its working perfect in div element. How can i get it to working? can someone help me?

Please check it here: https://jsfiddle.net/Issact/f6jc5th4/

HTML:

<div contenteditable="true">
This is editable and the spacebar does work in "Div" for the white-space
</div>
<button contenteditable="true">
This is editable and the spacebar does not work in "button" for the white-space
</button>

CSS:

div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}

The spacebar fires the "click" event on HTML buttons - this likely remains the case even when `contenteditable` is enabled. — Kallum Tanton, Jun 09 '17 at 11:44
Possible duplicate of [Chrome firing onClick when space typed in contenteditable button](https://stackoverflow.com/questions/22104860/chrome-firing-onclick-when-space-typed-in-contenteditable-button) This didnt take many second to search — Carsten Løvbo Andersen, Jun 09 '17 at 11:44
you shouldn't do this even if you find a fix; it's an accessibility issue — dandavis, Jun 09 '17 at 11:46
@Teemu Well, try it : the spacebar does not print a space character, instead, it pushes the button. — Jeremy Thille, Jun 09 '17 at 11:46

score 4 · Answer 1 · answered Aug 30 '21 at 13:07

This may help you:

const button = document.querySelector('button[contenteditable]')

button.addEventListener('keydown', function (event) {
  if (event.code !== 'Space') {
    return
  }
  event.preventDefault()
  document.execCommand("insertText", false, ' ')
})

Look example here: on JSFiddle

score 1 · Answer 2 · answered Jun 09 '17 at 11:46

wrap the text inside the button tag with a span make that span contenteditable

html

<div contenteditable="true">
This is editable and the spacebar does work in "Div" for the white-space
</div>
<button >
<span contenteditable="true">
This is editable and the spacebar does not work in "button" for the white-space
</span>
</button>

css

div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}

hope this works

Jalay Oza · Accepted Answer · 2017-06-09T11:53:55.930

Use this

<button 
    contenteditable="true" 
    onclick="if (!event.x && !event.y && !event.clientX && !event.clientY) {event.preventDefault(); insertHtmlAtCursor('&nbsp;');} else { }"> This is editable and the spacebar does not work in "button" for the white-space </button>

<script type="text/javascript">
function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
        window.getSelection().collapseToEnd();
        window.getSelection().modify('move', 'forward', 'character');
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
        document.selection.collapseToEnd();
        document.selection.modify('move', 'forward', 'character');
    }
}
</script>

Added live demo here https://jsfiddle.net/jalayoza/f6jc5th4/3/

Hope this helps

Thank jalay! this is working.. but in this case (my project) i won't like to use `JS` (onclick) — Devbuddy, Jun 09 '17 at 12:00

score 0 · Answer 4 · answered Jun 09 '17 at 11:48

0

You'll want to make an event listener that prevents the default event when the spacebar is clicked and then use execCommands to put the enter in programatically.

MDN Link: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

answered Jun 09 '17 at 11:48

Niels

529
2
6
20

Cybernetic · Answer 5 · 2017-12-20T19:23:26.183

@Jalay's answer almost worked but not quite. This is what worked for me:

Comment out window.getSelection().collapseToEnd(); part of Jalay's function:

function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
        //window.getSelection().collapseToEnd();
        window.getSelection().modify('move', 'forward', 'character');
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
        document.selection.collapseToEnd();
        document.selection.modify('move', 'forward', 'character');
    }
}

Then listen for the spacebar keyup event, and insert a space as needed:

$(document).on('keyup', 'button', function(e){
   if(e.keyCode == 32){
       insertHtmlAtCursor(' ');
   }
});

This also has the benefit of working for dynamically added content.

Spacebar "doesn't work" in `button` element when i use the HTML5 `contenteditable`. How can i get it to working?

5 Answers5