ipad-content-editing

by ecmanaut

HTML

<div id="debug"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

#editor {
    background: pink;
    position: absolute;
    opacity: 0.5;
}

#debug {
    touch-action: none;
    pointer-events: none;
    position: absolute;
    z-index: 1000;
    height: 90%;
    top: 10%;
    right: 0;
    left: 0;
}

JavaScript

const debug = document.getElementById('debug');
const editor = document.createElement('div');
editor.setAttribute('id', 'editor');
editor.setAttribute('contenteditable', 'true');
editor.setAttribute('tab-index', '0');
editor.style.cssText = 'line-height: 20.2871px; left: 35px; top: 13px;';
editor.addEventListener('input', (e) => {
    const msg = `input[${e.inputType}]: ${e.data}`;
    console.info(msg, e);
    debug.appendChild(document.createTextNode(msg));
    debug.appendChild(document.createElement('br'));
})
document.body.appendChild(editor);

const canvas = document.createElement('canvas');
canvas.style.cssText = 'position: absolute; top: 0; left: 0;';
canvas.setAttribute('width', innerWidth);
canvas.setAttribute('height', innerHeight);
canvas.addEventListener('touchstart', (e) => {
    editor.focus();
    e.preventDefault();
});
document.body.appendChild(canvas);