Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This seems to be a bug in Mobile Safari. When I toggle <code>contentEditable</code> to true in <code>touchstart</code> and set it to false in <code>touchend</code> it works. If I remove those lines and refresh it <em>still</em> works. If I close Mobile Safari, clear the cache, and then re-open the document with the lines removed it stops working again.</p> <p>I've updated the code below with a working version (although I removed the long-press for simplicity). </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; (function() { var node, range, offset, clientX, clientY; document.addEventListener("DOMContentLoaded", function() { document.body.addEventListener("touchstart", function(event) { var selection = window.getSelection(); selection.removeAllRanges(); clientX = event.touches[0].clientX; clientY = event.touches[0].clientY; range = document.caretRangeFromPoint(clientX, clientY); node = range.startContainer; offset = range.startOffset; document.body.contentEditable = "true"; event.preventDefault(); }); document.body.addEventListener("touchmove", function(event) { var selection = window.getSelection(), range = document.caretRangeFromPoint(event.touches[0].clientX, event.touches[0].clientY), newRange = document.createRange(); if(clientY &lt; event.touches[0].clientY) { newRange.setStart(node, offset); newRange.setEnd(range.startContainer, range.startOffset); } else { newRange.setStart(range.startContainer, range.startOffset); newRange.setEnd(node, offset); } selection.removeAllRanges(); selection.addRange(newRange); event.preventDefault(); }); document.body.addEventListener("touchend", function(event) { document.body.contentEditable = "false"; event.preventDefault(); }); }); })(); &lt;/script&gt; &lt;body&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus volutpat mauris sed porta. Phasellus euismod malesuada eleifend. Donec mattis, orci quis scelerisque mattis, turpis sem pulvinar nisi, et sagittis nunc nisi sed nulla. Pellentesque pharetra consequat neque, ultrices mattis mauris auctor id. Aenean tincidunt turpis non odio gravida semper. Praesent feugiat, lorem at lacinia tristique, orci eros tincidunt leo, at adipiscing sapien felis at tellus. Phasellus ac est nec nibh posuere euismod vel vitae neque. Vestibulum mollis adipiscing urna ut tristique. Vivamus purus tortor, venenatis id aliquam nec, elementum et lacus. Praesent elementum purus eget sapien ornare laoreet. Vestibulum ac odio enim. &lt;/body&gt; &lt;/head&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload