Skip to content

Instantly share code, notes, and snippets.

@bwindels

bwindels/contentinputevent.html

Created October 8, 2015 13:50
Show Gist options
  • Save bwindels/bef8cbddea30f4b77b50 to your computer and use it in GitHub Desktop.
Save bwindels/bef8cbddea30f4b77b50 to your computer and use it in GitHub Desktop.
Download ZIP
Prototype of a restrictive contenteditable editor in JS/HTML
Raw
contentinputevent.html
<!DOCTYPE html>
<html>
<body>
<p>The dog <span id="edit" contenteditable="true">sleeps on</span> the sofa</p>
<script type="text/javascript">
var handler = {
onBackspace: function() {
console.log("backspace");
},
onDelete: function() {
console.log("delete");
},
onMetaShortcut: function(actionKey) {
console.log("meta shortcut", String.fromCharCode(actionKey));
},
onInput: function(text) {
span.innerText = span.innerText + text;
var range = document.createRange();
range.selectNodeContents(span);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
console.log("input", text);
},
onPaste: function(text) {
console.log("paste", text);
},
onTextCompositionStart: function() {
console.log("composition start");
},
onTextCompositionUpdate: function(currentValue) {
console.log("composition update", currentValue);
},
onTextCompositionEnd: function() {
console.log("composition end");
}
};
var span = document.getElementById("edit");
var metaShortcutKeys = [66, 73];
span.addEventListener("keydown", function(event) {
var cancel = false;
if(event.keyCode === 8) {
handler.onBackspace();
cancel = true;
}
if(event.keyCode === 46) {
handler.onDelete();
cancel = true;
}
if(event.metaKey && metaShortcutKeys.indexOf(event.keyCode) !== -1) {
handler.onMetaShortcut(event.keyCode);
cancel = true;
}
if(cancel) {
event.preventDefault();
event.stopPropagation();
}
});
span.addEventListener("keypress", function(event) {
if(event.metaKey) {
return;
}
var keychar = String.fromCharCode(event.charCode);
handler.onInput(keychar);
event.preventDefault();
event.stopPropagation();
});
span.addEventListener("paste", function(event) {
var text = event.clipboardData.getData("text/plain");
if(typeof text === "string") {
handler.onPaste(text);
}
event.preventDefault();
event.stopPropagation();
});
span.addEventListener("compositionstart", function(event) {
event.preventDefault();
handler.onTextCompositionStart();
});
span.addEventListener("compositionupdate", function(event) {
handler.onTextCompositionUpdate(event.data);
});
span.addEventListener("compositionend", function(event) {
handler.onTextCompositionEnd();
handler.onInput(event.data);
event.preventDefault();
event.stopPropagation();
});
span.addEventListener("input", function(event) {
console.log("input", event);
event.preventDefault();
event.stopPropagation();
});
span.addEventListener("textInput", function(event) {
console.log("textInput", event);
//event.preventDefault();
//event.stopPropagation();
});
// span.addEventListener("focus", function(event) {
// console.log("focus!");
// });
// span.addEventListener("blur", function(event) {
// console.log("blur!");
// });
document.addEventListener("selectionchange", function(event) {
console.log("selectionchange!", window.getSelection());
});
document.addEventListener("selectionstart", function(event) {
console.log("selectionstart!", window.getSelection());
});
</script>
</body>
</html>
Raw
selection.html
<!DOCTYPE html>
<html>
<body>
<p id="all">The dog <span id="edit" contenteditable="true">sleeps on</span> the sofa</p>
<p><button id="select">Select</button></p>
<script type="text/javascript">
var button = document.getElementById('select');
button.addEventListener('click', function() {
var span = document.getElementById('edit');
var spanRange = document.createRange();
spanRange.selectNodeContents(span);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(spanRange);
spanRange.focus();
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment