ContentEditable And “ReadOnly”? YES!

making container, any HTML container (PRE, DIV, SPAN) contenteditable="true" is a very appealing opportunity of making the most of the most cutting-edge CSS3-styling and animation (!!) along with easy user-interaction, allowing easily using CTRL+A,

code is easy enough to program (REALLY EASY) but apparently
no one has came across thinking of this solution,
while the phrase “thinking out of the box” is dropped quite often,
it is a rare quality now days..

every previous solution by *others* just include the straightforward solution (a.k.a “head in the wall”) identifying every single key-combination that “is allowed” (for example CTRL+A) and blocking (preventDefault, cancelBubble, stopPropagation :| and of course return false) by the nature of filtering, you are also blocking… F5 (refresh the page) PageDown, PageUp, Arrow-Keys navigations, F12 for developer’s-console…
Oh $hit!!! now I have to specifically allow all those **!@# ???

well.. NOPE!..
…think simpler

because simple is always better.

so what if the user “want to change” the content,
just change it back, fast enough,
restoring the original text might be visible or flick,
…but that’s OK! (also, – due to smart selecting of the event implementing – it won’t..)

..also! You can always add more event-handlers (touch start?? nhaaa! too lazzzzyyyy)

have a look on the following code, I’ve used it in one of my other posts:

<style>
  pre.code-like{
    -webkit-text-stroke: .2px rgba(0,0,0,.5);
    background: rgba(245,245,211,.1);
    border-radius: 2px;
    border: 1px dashed rgba(214,214,214,.7);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5),  -1px -1px 2px rgba(0,0,0,.2);
    color: #000000;
    font-family: Courier New,monospace;
    line-height: 1.3em;
    margin: 0;
    overflow-x: auto;
    padding: 5px;
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
  }
</style>


<pre class="code-like" style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '>&lt;?</span><span style='color:#7f0055; font-weight:bold; '>xml</span><span style='color:#7f0055; '> </span><span style='color:#7f0055; '>version</span><span style='color:#7f0055; '>=</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; font-weight:bold; '>1.0</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>?></span>
<span style='color:#7f0055; '>&lt;!</span><span style='color:#7f0055; font-weight:bold; '>DOCTYPE</span> <span style='color:#7f0055; font-weight:bold; '>cross-domain-policy</span> <span style='color:#7f0055; '>SYSTEM</span> <span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http</span><span style='color:#2a00ff; '>:</span><span style='color:#7f0055; font-weight:bold; '>//</span><span style='color:#3f3fbf; '>www.adobe.com</span><span style='color:#3f3fbf; '>/xml/dtds/cross-domain-policy.dtd</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>site-control</span> permitted-cross-domain-policies=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>all</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-access-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> to-ports=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-http-request-headers-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> headers=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
</pre>


<script>
  function make_editable_readonly(element){
    element.backup_innerHTML = element.innerHTML;   /* backup before editable. */
    element.contenteditable = "true";               /* editable. CTRL+A is usable (FUN!) */

    element.onautocomplete                          /* what in the world could change the content? actually lot!.. */
  = element.onchange 
  = element.oncontextmenu 
  = element.oncopy 
  = element.oncuechange 
  = element.oncut 
  = element.ondrag 
  = element.ondragend 
  = element.ondrop 
  = element.onemptied 
  = element.onkeyup 
  = element.onmouseup 
  = element.onpaste 
  = element.onreset = function restore(){ 
                        if (element.innerHTML !== element.backup_innerHTML) 
                          element.innerHTML = element.backup_innerHTML;
                      };
  }
  
  make_editable_readonly(
    document.querySelector('pre.code-like')
  );
</script>

demo (you can view it in new tab or have a look it the source..)

I’ve actually initially thought it was a good idea to put the styling and script in this post (here…) ..too
but decided it too mata/”inception”

I’ve posted it also here:
http://stackoverflow.com/questions/4144271/disabling-paste-option-from-the-context-menu/34522284#34522284 (see the alternatives.. :| )