Transformer un paragraphe ou une liste en input

**diane621** · 06/05/2017, 20h10

Bonjour,
J’aurais besoin de votre aide. J’aimerais transformer le deuxième, le quatrième, le sixième paragraphe en input lorsqu’on clique sur le bouton modifier.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <p >Exo 1:</p>
 <p >3</p>
 <p >Exo 2:</p>
 <p>4</p>
 <p >Exo 3:</p>
 <p>4</p>
 <button type="button" >Modifier</button>

J’ai trouvé un code js mais ça transforme en input lorsqu’on clique sur le paragraphe et pas quand on click sur le bouton et je n’arrive pas à l’adapter sur le mien.

Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<input type="text" id="moninput" value="" style="display:none;"/>
<span onclick="afficher_input(this)">Coucou</span>
 
<script type="text/javascript">
function afficher_input(t) {
    document.getElementById('moninput').style.display = '';
    document.getElementById('moninput').value = t.innerHTML;
}
</script>

Voilà ! J'espère quelqu’un pourra m’aider.
Merci.

bm · 06/05/2017, 21h40

Un exemple avec des fruits :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<body>
 
<form>
Select a fruit:
<br>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>
<br>
 
<button onclick="myFunction()">Remove selected fruit</button>
 
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    x.remove(x.selectedIndex);
}
</script>
 
</body>
</html>

**NoSmoking** · 07/05/2017, 12h07

Bonjour et bienvenue sur DVP.

J’ai trouvé un code js mais ...

cela ne suffit pas il faut essayer de comprendre ce que celui ci fait, ce qui visiblement est ton cas.

TRES souvent le plus simple et de bien savoir ce que tu cherches à faire et de faire correspondre la structure HTML à ton besoin.

Dans ton cas tu pourrais très bien avoir un formulaire « like » comme suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <input value="3" disabled></p>
  <p>Exo 2 : <input value="4" disabled></p>
  <p>Exo 3 : <input value="5" disabled></p>
  <p><button type="button" >Modifier</button></p>
</fieldset>

les <input> sont mis en disabled pour ne pas être modifié, ils peuvent être stylé pour obtenir une apparence neutre, non input, par exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
fieldset input {
 background: #EFEFEF;
 border: none;
 font: inherit;
}
fieldset input:disabled {
 background: #FFF;
}

au final ta solution revient à supprimer l'attribut disabled lorsque tu appuies sur le <button> et ceci se fait en utilisant la méthode removeAttribute(), fonction qui pourrait ressembler à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeDisabled() {
  var oInputs = document.querySelectorAll('input');
  var i;
  var nb = oInputs.length;
  for (i = 0; i < nb; i += 1) {
    oInputs[i].removeAttribute('disabled');
  }
}

et pour l'appel de la fonction il suffit de faire un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var oBtn = document.querySelector('button');
oBtn.onclick = removeDisabled;

Le fichier simplifié pour test

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>INPUT Disabled</title>
<meta name="Author" content="NoSmoking">
<style>
fieldset {
  width: 20em;
}
fieldset input {
 background: #EFEFEF;
 border: none;
 font: inherit;
}
fieldset input:disabled {
 background: #FFF;
}
</style>
</head>
<body>
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <input value="3" disabled></p>
  <p>Exo 2 : <input value="4" disabled></p>
  <p>Exo 3 : <input value="5" disabled></p>
  <p><button type="button" >Modifier</button></p>
</fieldset> 
<script>
function removeDisabled() {
  var oInputs = document.querySelectorAll('input');
  var i;
  var nb = oInputs.length;
  for (i = 0; i < nb; i += 1) {
    oInputs[i].removeAttribute('disabled');
  }
}
var oBtn = document.querySelector('button');
oBtn.onclick = removeDisabled;
</script>
</body>
</html>

Invité · 07/05/2017, 16h25

Bonjour,

1/ une autre solution : https://codepen.io/jreaux62/pen/BRmYWd

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable">3</span></p>
  <p>Exo 2 : <span class="editable">4</span></p>
  <p>Exo 3 : <span class="editable">5</span></p>
  <p><button type="button" onclick="toggleInput(this)">Modifier ?</button></p>
</fieldset>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var isInput = false; // initialisation : ce ne sont pas des input
function showInput(id) {
  var oInputs = document.querySelectorAll('span.editable');
  var nb = oInputs.length;
  if( !isInput ) // si ce ne sont pas déjà des input, on les rajoute
  {
    for (var i = 0; i < nb; i++) {
     oVal = oInputs[i].innerHTML;
      oInputs[i].innerHTML = '<input type="number" value="'+oVal+'" />';
    }
      isInput = true;
    // on peut aussi masquer le bouton (devenu inutile)
    // id.style.display='none';
  }
}

2/ variante, avec retour possible (afficher / masquer les input) : https://codepen.io/jreaux62/pen/qmVxaW

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable">3</span></p>
  <p>Exo 2 : <span class="editable">4</span></p>
  <p>Exo 3 : <span class="editable">5</span></p>
  <p><button type="button" onclick="toggleInput(this)">Modifier ?</button></p>
</fieldset>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var isInput = false; // initialisation : ce ne sont pas des input
function toggleInput(id) {
  var oInputs = document.querySelectorAll("span.editable");
  var nb = oInputs.length;
  if (isInput) {
    // si ce sont déjà des input, on les remplace par leur valeur
    for (var i = 0; i < nb; i++) {
      oVal = oInputs[i].querySelector("input").value;
      oInputs[i].innerHTML = oVal;
      isInput = false;
      id.innerHTML = "Modifier ?";
    }
  } else {
    // on remplace les valeur par des input
    for (var i = 0; i < nb; i++) {
      oVal = oInputs[i].innerHTML;
      oInputs[i].innerHTML = '<input type="number" value="' + oVal + '" />';
      isInput = true;
      id.innerHTML = "Ne pas Modifier";
    }
  }
}

3/ Cela dit, comment récupérer les valeurs des input s'ils n'ont pas de nom (name) ?
On va donc rajouter des name -> https://codepen.io/jreaux62/pen/mmqXXW

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<fieldset>
  <legend>Exercice</legend>
  <p>Exo 1 : <span class="editable" data-name="exo1">3</span></p>
  <p>Exo 2 : <span class="editable" data-name="exo2">4</span></p>
  <p>Exo 3 : <span class="editable" data-name="exo3">5</span></p>
  <p><button type="button" onclick="showInput(this)">Modifier</button></p>
</fieldset>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var isInput = false; // initialisation : ce ne sont pas des input
function showInput(id) {
  var oInputs = document.querySelectorAll('span.editable');
  var nb = oInputs.length;
  if( !isInput ) // si ce ne sont pas déjà des input, on les rajoute
  {
    for (var i = 0; i < nb; i++) {
     oVal = oInputs[i].innerHTML;
     oName = oInputs[i].dataset.name;
      oInputs[i].innerHTML = '<input type="number" name="'+oName+'" value="'+oVal+'" />';
    }
      isInput = true;
    // on peut aussi masquer le bouton (devenu inutile)
    id.style.display='none';
  }
}

**diane621** · 07/05/2017, 16h59

Merci de votre reponse !

C'est exactement ce que je voulais faire.

Transformer un paragraphe ou une liste en input

JavaScript

Discussions similaires

Partager

Partager