Javascript 空格键“；不'；t工作“；当我使用HTML5“contenteditable”时，在“button”元素中。我怎样才能让它工作呢？

当我使用HTML5

contenteditable

时，空格键在

按钮中不起作用。但是它在
div
元素中工作得非常完美。我怎样才能让它工作呢？有人能帮我吗

请在这里查看：

HTML:

用span将文本包装在按钮标记内，使该span内容可编辑

html

希望这能起作用
用这个

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

这是可编辑的，空格键在空白的“按钮”中不起作用
函数insertHtmlAtCursor（html）{
var范围，节点；
if（window.getSelection&&window.getSelection（）.getRangeAt）{
range=window.getSelection（）.getRangeAt（0）；
node=range.createContextualFragment（html）；
range.insertNode（节点）；
window.getSelection（）.collapseToEnd（）；
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'）；
}
}

添加了现场演示

希望这对您有所帮助
您希望创建一个事件侦听器，在单击空格键时阻止默认事件，然后使用execCommands以编程方式输入enter

MDN链接：
@Jalay的回答几乎奏效，但并不完全奏效。这就是我的工作原理：

注释out window.getSelection（）.collapseToEnd（）；Jalay的部分职能：

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

然后侦听空格键向上事件，并根据需要插入空格：

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

这也有利于处理动态添加的内容

请定义“不起作用”。空格键在HTML按钮上触发“单击”事件-即使启用了
contenteditable
，这种情况也可能继续存在。搜索时可能会重复这种情况，但不会花费多少秒。即使找到修复程序，也不应该这样做；这是一个可访问性issue@Teemu好吧，试试看：空格键不打印空格字符，而是按下按钮。谢谢jalay！这起作用了。。但在本例中（我的项目），我不喜欢使用
JS
（onclick）
div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}

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

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

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