关于javascript：当我使用HTML5`contenteditable`时，`button`元素中的空格键”不起作用”。我怎样才能使它正常工作？


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

当我使用HTML5 contenteditable时，

空格键在button元素中不起作用。但是它在div元素中可以完美地工作。我怎样才能使它正常工作？有人可以帮我吗？

请在此处检查：https://jsfiddle.net/Issact/f6jc5th4/

HTML：

1
2
3
4
5
This is editable and the spacebar does work in"Div" for the white-space

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

CSS：

1
2
3
4
5
6
7
8
9
10
div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}
相关讨论

使用此

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button
    contenteditable="true"
    onclick="if (!event.x && !event.y && !event.clientX && !event.clientY) {event.preventDefault(); insertHtmlAtCursor('');} 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');
    }
}

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

希望这会有所帮助

相关讨论

在按钮标签内的文本用跨度包裹，使该跨度内容可编辑

html

1
2
3
4
5
6
7
This is editable and the spacebar does work in"Div" for the white-space

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

css

1
2
3
4
5
6
7
8
9
10
div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}

希望这能奏效

@Jalay的回答几乎奏效，但效果不尽人意。这对我有用：

注释掉window.getSelection()。collapseToEnd(); Jalay函数的一部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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');
    }
}

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

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

这还具有处理动态添加的内容的好处。

enter

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