Question

我有一个contenteditable=true的按钮。我可以编辑文本，但我无法在Chrome中输入空格。当我点击空格键时，Chrome会在按钮上触发onClick事件。但是，Safari会像您期望的那样插入空格。

使用此代码，在编辑按钮时尝试键入空格会触发Chrome中的提醒。

<button 
    contenteditable="true" 
    onclick="alert('wtf?');">Edit me!</button>

使用此代码：http://jsfiddle.net/Jrt8w/1/

为什么Chrome假装是点击事件？我怎样才能说服它插入一个空格呢？

Answer 1

这比出现的问题更难。似乎没有办法关闭空格键“点击”按钮，所以这是一次尝试仿真：

<button 
    contenteditable="true" 
    onclick="if (!event.x && !event.y && !event.clientX && !event.clientY) {event.preventDefault(); insertHtmlAtCursor('&nbsp;');} else {alert('wtf?');}">Edit me!</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>

您可以看到它正常工作here。

我从this answer复制了我的代码。请注意，我只在Chrome中测试过。不确定它是否可以在IE中工作，如果没有，我会使用像我在上面链接的答案中提到的Rangy这样的库。不管怎样，这应该给你一个很好的起点。

Answer 2

我在Firefox 31和32中遇到了类似的问题。打字空间打开了警告框。解决方案：使用onmousedown替换onclick。

Answer 3

event.preventDefault()

是什么救了我。在keyPress函数中有一个event.preventDefault，不应该调用onClick。

当在contenteditable按钮中键入空格时，Chrome会点击onClick

3 个答案: