button
当我使用HTML5时,空格键在元素中不起作用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;
}
用这个
<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');
}
}
</script>
在此处添加了现场演示https://jsfiddle.net/jalayoza/f6jc5th4/3/
希望这可以帮助
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句