Learn VBA & Macros in 1 Week!

JavaScript - Contenteditable = 'false' Is Not Doing What I Expect It To.

Full Excel VBA Course - Beginner to Expert

Contenteditable = 'false' Is Not Doing What I Expect It To.	View Content

Consider the following test page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Contenteditable Test</title>
    <style>
      .test {} [contenteditable="true"] { outline:1px solid red; }
    </style>
    
    <script>
      function listen(id, eventName, func) {
        el = document.getElementById(id);

        if (el.addEventListener)
          el.addEventListener(eventName, func, false);
        else
          el.attachEvent('on'+eventName, func);
      }

      window.onload = function() {
        listen('root', 'click', toggle);
        listen('test', 'click', toggle);
      }    

      function toggle(e) {
        var el = getTarget(e).parentNode;
      
        if (el.id == 'test') {
          el.setAttribute('contenteditable', 'true');
        } else {
          el.setAttribute('contenteditable', 'false');  /* The style of the element should change accordingly.  *** BUT *** it DOESN'T!!!! */
          alert(el.getAttribute('contenteditable'));  /* Confirm that contenteditable is 'false'. */
        }
      }

      function getTarget(e) {
        return (window.event == undefined ? e : window.event).target;
      }
    </script>
  </head>

  <body>
    <div id="root">
      <h1>Contenteditable Test</h1>
      
      <div id="test" contenteditable="false">
	<p>The quick brown fox jumps over the lazy dog.</p>
      </div>
    </div>
  </body>
</html>

The desired behaviour is: When you click on the test div, the content should become editable (and the style of the div should change accordingly - the test div gets a red outline). When you click outside the test div, the content should become not-editable (and the style of the div should change accordingly - the test div loses its red outline).

When you click on the test div, its contenteditable attribute is set to 'true' and it becomes editable, as expected. When you click outside the test div, its contenteditable attribute is set to 'false', as expected, BUT its style does not change accordingly. I would expect it to change because the red outline style is predicated upon contenteditable being 'true' for the element, but the red outline remains even when contenteditable is no longer 'true'.

By the way, I have tried 'false', false and 0, all to no avail.

Obviously, I can force the style of the element when it is 'deselected', but that is a very ugly hack and will cause a headache if/when I want to change the contenteditable style in the future (I don't want to have to do it in several places - it should be possible to do it just in the CSS).

Any ideas why this is happening?

Full Excel VBA Course - Beginner to Expert

Anchoroffset And Contenteditable

Similar Tutorials

JavaScript - Contenteditable = 'false' Is Not Doing What I Expect It To.

Contenteditable = 'false' Is Not Doing What I Expect It To.

Similar Tutorials

Anchoroffset And Contenteditable

Contenteditable Div Caret Position

Nested Contenteditable Element Prevents Hyperlink Default Behavior

First False Pop-up

Am I Using False The Correct Way?

How To Change Var Ampm = False?

Problem With 'return False;'

Return False; Not Working...

Return False Problems ....

Javacript Alert Box Redirect To False Ie9?

Checkbox Wont Recognise False

Checkbox Return False If Not Checked

Setting Causes Validation= False Using Javascript

Regexp Testing False In A Loop

Js Problem With Return True/false

Pass A False Statement Out From A Function

Script Keeps Changing Text Value To False

If Statement - Not Responding To False Condition

If Client Submits Value Higher Than X, Then Return False

Default Event Not Stopping Even With Return False;