Comment rendre un élément div modifiable (comme une zone de texte lorsque je clique dessus) ?

Question

Comment rendre un élément div modifiable (comme une zone de texte lorsque je clique dessus) ?

Demandé el 14 de Mars, 2010: Quand la question a-t-elle été
31070 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
    </head> 
<body> 
        <style type="text/css" media="screen"> 

        </style> 

        <!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>-->

        <div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div>
        <script src="jquery-1.4.2.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8"> 

        </script> 
    </body> 
</html>

Gracias

Demandé el 14 de Mars, 2010 par zjm1126

Answer 1

3 Réponses

Answer 2

4voto

user1063287 Points 916

Pour ceux qui recherchent un on() version, ceci est basé sur la réponse d'Anurag.

Si, pour une raison ou une autre, vous vouliez retirer l'événement de clic de l'entrée de texte éditable (par exemple pour afficher les versions éditables et non éditables du contenu), vous pourriez appliquer plus tard $(document).off("click", ".editable_text"); .

$(document).on("click", ".editable_text", function() {
  var original_text = $(this).text();
  var new_input = $("<input class=\"text_editor\"/>");
  new_input.val(original_text);
  $(this).replaceWith(new_input);
  new_input.focus();
});

$(document).on("blur", ".text_editor", function() {
  var new_input = $(this).val();
  var updated_text = $("<span class=\"editable_text\">");
  updated_text.text(new_input);
  $(this).replaceWith(updated_text);
});

.text_editor {
  border: none;
  background: #ddd;
  color: #000;
  font-size: 14px;
  font-family: arial;
  width: 200px;
  cursor: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="editable_text">Here is my original text.</span>
</p>

Répondu el 8 de Juillet, 2016 par user1063287 (916 Points )

Answer 3

0voto

Vipin Pandey Points 184

Pouvez-vous essayer celui-ci

 <!DOCTYPE html>
    <html>
    <body>

    <div id="myP">This is a paragraph. Click the button to make me editable.</div>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        document.getElementById("myP").contentEditable = true;
        document.getElementById("demo").innerHTML = "The p element above is now editable. Try to change its text.";
    }
    </script>

    </body>
    </html>

Répondu el 15 de Juin, 2018 par Vipin Pandey (184 Points )

Answer 4

0voto

Paul Jones Points 314

Voici une solution simple :

$('div').click(function(e){
    this.contentEditable = 'true';
});

Exemple de travail à https://jsfiddle.net/pgdqhacj/2/ . Le seul inconvénient est que vous devez double-cliquer pour éditer le texte, et non pas faire un simple clic.

Répondu el 19 de Septembre, 2018 par Paul Jones (314 Points )

Comment rendre un élément div modifiable (comme une zone de texte lorsque je clique dessus) ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment rendre un élément div modifiable (comme une zone de texte lorsque je clique dessus) ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: