How to make an HTML
element editable cross-b

2019-01-08 05:58发布

问题:

Do you know how to make a <div> editable with JavaScript? I'm looking for cross-browser solution.

Something similar to a rich text area, but that uses an editable <iframe>. I need something similar for a <div>.
I don't want to use a replacement textbox.

回答1:

I found out how.

You use the contentEditable property of the DOMElement, like so

<div onClick="this.contentEditable='true';">
    lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>


回答2:

You can do this in pure HTML

<div class="editable" contenteditable="true">
    Editable text...
</div>

Hope this helps!



回答3:

Set contentEditable property of the element to "true":

element.contentEditable = "true";

See also:

  • Content Editable MDN docs
  • Browser support on caniuse.com


回答4:

How about his: 

Make a hidden "textArea" , and upon selecting(clicking or Hover) the div , hide the Div and Show the textArea .