当我使用HTML5`contenteditable`时，空格键在“button”元素中“无效”。我怎样才能让它运转起来？

Question

当我使用HTML5 button时，空格键在contenteditable元素中不起作用。但它在div元素中的工作完美。我怎样才能让它运转起来？有人能帮助我吗？

请在此处查看：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;
}

Answer 1

将文本包含在按钮标记内，并使用跨度contenteditable

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00" data-name="Agency 1">See Agency 1</p>

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="07:00" data-closed-hours="20:00" data-name="Agency 2">See Agency 2</p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS

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

希望这有效

Answer 2

使用此

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

在此处添加了现场演示https://jsfiddle.net/jalayoza/f6jc5th4/3/

希望这有帮助

Answer 3

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

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

Answer 4

@ Jalay的答案几乎有效，但并不完全。这对我有用：

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

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

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

这也有助于动态添加内容。