我有一个按钮contenteditable=true。我可以很好地编辑文本，但无法在 Chrome 中输入空格。当我按下空格键时，Chrome 会在按钮上触发 onClick 事件。然而，Safari 会按照您的预期插入一个空格。
使用此代码，在编辑按钮时尝试键入空格会触发 Chrome 中的警报。
<button
contenteditable="true"
onclick="alert('wtf?');">Edit me!</button>
摆弄这段代码：http://jsfiddle.net/Jrt8w/1/ http://jsfiddle.net/Jrt8w/1/
为什么 Chrome 假装这是一个点击事件？我怎样才能说服它插入一个空格？
这是一个比看上去更难的问题。似乎没有任何方法可以关闭空格键“单击”按钮，因此这是一次模拟尝试：
<button
contenteditable="true"
onclick="if (!event.x && !event.y && !event.clientX && !event.clientY) {event.preventDefault(); insertHtmlAtCursor(' ');} 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 http://jsfiddle.net/5Fyzy/1/.
我复制了我的代码的主要部分这个答案 https://stackoverflow.com/a/2213514/468405。请注意，我只在 Chrome 中进行了测试。不确定它是否能在 IE 中工作，如果不能，我会使用像这样的库Rangy http://code.google.com/p/rangy/，在我上面链接的答案中提到。无论哪种方式，这都应该为您提供一个良好的起点。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
