I have a div that has a lot of child elements. I want this complete div and all the elements in this div to be uneditable. How do I set all the child elements to readonly? This div has a lot going on inside with a lot of dynamically changing child elements and I cannot traverse through all the elements to set them readonly. How can I set this complete div to readonly in an easy way? If i just set the parent div element to read only, will all the child elements automatically become readonly?

Some additional context: Why am I doing this? There is some text field somewhere inside this div that is causing the keyboard to popup on mobile. I want to fix this- and given that my entire web app is designed to be uneditable- i want to just set the whole thing to readonly to avoid any keyboard ever popping up.

CodePudding user response：

div {
    pointer-events: none;
}

here

CodePudding user response：

You could use pointer-events: none; to disable mouse DOM interaction

CodePudding user response：

To make a div and all its child elements read-only, you can use the contenteditable attribute. You can set this attribute to false on the div element to make it and all its child elements uneditable.

Here is an example:

<div contenteditable="false">
  ...
  <!-- child elements -->
  ...
</div>

Note that setting the contenteditable attribute to false will not prevent keyboard from popping up on mobile devices. Instead, you can use the readonly attribute on the input element to prevent keyboard from popping up. Here is an example:

<input type="text" readonly />

Alternatively, you can use the disabled attribute on the input element to prevent keyboard from popping up and to prevent the user from interacting with the element. Here is an example:

<input type="text" disabled />

Hope this helps!

CodePudding user response：

here is example:

div {
    pointer-events: none;
}

<div>
    <input type="text" value="value" />
    <br />
    <textarea>value</textarea>
</div>