javascript - Spacebar "doesn't work" in `button` element when i use the HTML5 `contenteditable`. How c

admin管理员组

文章数量:1403500

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: /

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;
}

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/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;
}

• javascript
• jquery
• css
• html

Share Improve this question Follow edited Jun 9, 2017 at 11:44 Devbuddy asked Jun 9, 2017 at 11:41 DevbuddyDevbuddy 23144 silver badges1717 bronze badges 6

• Please define "doesn't work". – Teemu Commented Jun 9, 2017 at 11:42
• The spacebar fires the "click" event on HTML buttons - this likely remains the case even when contenteditable is enabled. – Kallum Tanton Commented Jun 9, 2017 at 11:44
• Possible duplicate of Chrome firing onClick when space typed in contenteditable button This didnt take many second to search – Carsten Løvbo Andersen Commented Jun 9, 2017 at 11:44
• you shouldn't do this even if you find a fix; it's an accessibility issue – dandavis Commented Jun 9, 2017 at 11:46
• @Teemu Well, try it : the spacebar does not print a space character, instead, it pushes the button. – Jeremy Thille Commented Jun 9, 2017 at 11:46

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 5

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

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/jalayoza/f6jc5th4/3/

Hope this helps

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

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/en-US/docs/Web/API/Document/execCommand

@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.

本文标签：