JS - element properties - contentEditable

revision:


sets or returns whether the content is editable or not.

top

It sets or returns if the content of an element is editable.

Syntax:

element.contentEditable : returns the contentEditable property.

element.contentEditable = value : sets the contentEditable property.

property value:

value : "true" - the content is editable; "false" - the content is not editable; inherit"- default. Is editable if parent element is editable

example

Am I editable?

I am a paragraph. Click "editable" to make me editable.

code:
                <div>
                    <p id="par1" contenteditable="true">Am I editable?</p>
                    <p id="prop1"></p>
                    <p id="par2" style="font-size: 0.9vw;">I am a paragraph. Click "editable" to make me 
                    editable.</p>
                    <button onclick="firstFunction()">editable</button>
                    <p id="prop2"></p>
                </div>
                <script>
                    let answer = document.getElementById("par1").contentEditable;
                    document.getElementById("prop1").innerHTML = answer;
                    function firstFunction() {
                        document.getElementById("par2").contentEditable = true;
                        document.getElementById("prop16").innerHTML = "The paragraph is now editable. 
                        Try to edit it.";
                    }
                </script>
            

Try to change this text.

            <div>
                <p id="par3" contenteditable="true">Try to change this text.</p>
                <button onclick="secondFunction(this);">Disable "par2" to be editable!</button>
                <p id="prop3"></p>
            </div>
            <style>
            </style>
            <script>
                function secondFunction(button) {
                    const x = document.getElementById("par3");
                    if (x.contentEditable == "true") {
                        x.contentEditable = "false";
                        button.innerHTML = 'Enable "par3" p to be editable!';
                    } else {
                        x.contentEditable = "true";
                        button.innerHTML = 'Disable "par3" to be editable!';
                    }
                }
    
            </script>