Skip to content

Instantly share code, notes, and snippets.

@bwindels

bwindels/contentinputevent.html

Created October 8, 2015 13:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bwindels/bef8cbddea30f4b77b50 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bwindels/bef8cbddea30f4b77b50 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Bruno Windels created this gist Oct 8, 2015.
    121 changes: 121 additions & 0 deletions contentinputevent.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,121 @@
    <!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>
    20 changes: 20 additions & 0 deletions selection.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!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>