Make editable post-it (element)

Asked

Viewed 158 times

-2

I’d like to leave the post-it editable, so that when it is clicked it can already be edited normally.

Below is my code:

$(".adicionar").click(function() {
   $('<div class="post-it">' +
        '<ul>'
          +'<li>'
            +'<a href="#">'
             +' <h2>Titulo</h2>'
                +'<p>Text Qualquer #1</p>'
            +'</a>'
         +' </li>'
        +'</ul>'
      +'</div>').insertAfter(this);
});

javascript jquery

  • @Lipespry-defolga-, see the editing history. Apparently, what he would like is to leave the editable element. This is remarkable by the original title of the question itself "Torna o post It Editavel [...]"

  • @Luizfelipe before a supposed answer, fits several interpretations of the question - as we have seen. Do not think it is more useful to flag and/or comment suggesting an issue by the author asking for clarification?

  • Actually, the comment would be more useful in that context. However, I don’t think that omitted no relevant information of the question, since the intention of the edition was to correct any spelling errors that were present. I ask once again that review the question edit history. Anyway, I apologize for the possible confusion.

  • 1

    You just want it to be editable or it will be a "form" that you later want to send what is written to the bank or something?

  • exactly that, when clicking it turn a form ai edits it normally, example in wordpress Dashboard when we want to edit the page of the template, we press example in the title and write that will be saved; however the little guy below saved me, because now I only do send, the data editable to the database.

1 answer

1


You don’t even need Javascript for this, you can do only with the attribute contenteditable of HTML5:

.post-it {
  width: 50%;
  height: 200px;
  background-color: #ffffcb;
  padding: 15px;
}
h1 {
  text-align: center;
}
h1, p {
  outline: none;
}
<div class="post-it">
  <h1 contenteditable="true">Título Editável</h1>
  <p contenteditable="true">Textos quaisquer editáveis</p>
</div>

  • 2

    just that beast, thank you

  • Jewel brother, success there!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.