Contrôle de la touche Entrée

Version imprimable

Bonjour,

Oui je sais que ce sujet à déja été étudié auparavant.
Mais mon cas est un petit peu plus compliqué, je n'ai pas réussi à le faire malgré ce que j'ai lu dans les autres sujets du forum.

Alors voila, j'ai un texte, qui quand on clique dessus, se transforme en champ de saisie. On peut ainsi changer la valeur du texte, et dès qu'on clique ailleurs que dans le champs de saisie, ce dernier se retransforme en texte, avec sa nouvelle valeur.

Voici le code, ce sera peut etre plus clair.

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
    <script language="javascript">
 
      function trim(str)
      {
        return str.replace(/^\s+/,'').replace(/\s+$/,'');
      }
 
 
 
      function htmlEntities(html)
      {
        html = html.replace(/<[^>]*>/g,"");
        return trim(html);
      }
 
 
      function hasInput(id)
      {
        return (document.getElementById(id).getElementsByTagName('input')[0] != null);
      }
 
 
      function editMode(id)                                
      { 		
        if (!hasInput(id))
        {
          var value = htmlEntities(document.getElementById(id).innerHTML);
          document.getElementById(id).innerHTML = '<input type="text" id="input_'+id+'" value="'+value+ '" />';
          document.getElementById('input_'+id).focus();
          document.getElementById(id).onclick = null;
          document.getElementById('input_'+id).onblur = function onblur(event){ editMode(id); }
        }
        else
        {
          var texte = document.getElementById('input_'+id).value;
          document.getElementById(id).innerHTML = texte;
          document.getElementById(id).onclick = function onclick(event){ editMode(id); }
        }
      } 
 
    </script>
 
  </head>
  <body>
 
    <form method="POST" id="form">
      <p id="editable3" style="color:blue;font-weight:bold" onclick="editMode('editable3')">
        Cliquez sur le texte !!!
      </p>
    </form>
 </body>
</html>

Alors mon problème est le suivant :
Lorsqu'on édite le texte, puis qu'on appuie sur entrée, le formulaire est envoyé. Seulement moi j'aimerais juste que le champs de saisie se ferme et se retransforme en texte, mais que le formulaire ne soit pas envoyé.
Est-ce possible ?

Merci d'avance

24/07/2007, 14h55
marcha

Salut,

Oui, il te faut intercepter l'évenement onsubmit et empecher son traitement
par défaut.

Ou alors, supprimer la balise form et gérer la mise à jour avec AJAX

Ou encore, laisser poster le formulaire en cliblant dans un iframe invisible (attribut
target du form portant le nom de l'iframe)

A toi de voir

Ca y est, j'ai trouvé la solution a mon problème.
Il fallait que je redéfinnisse l'évenement onkeypress
Voila le code :

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
    <script language="javascript">
 
      function trim(str)
      {
        return str.replace(/^\s+/,'').replace(/\s+$/,'');
      }
 
 
 
      function deleteBaliseHTML(html)
      {
        html = html.replace(/<[^>]*>/g,"");
        return trim(html);
      }
 
      function htmlEntities(str)
      {
        str = str.replace(/&/g, "&amp;");
        str = str.replace(/"/g, "&quot;");
        str = str.replace(/</g, "&lt;");
        str = str.replace(/>/g, "&gt;");
        return str;
      }
 
 
      function hasInput(id)
      {
        return (document.getElementById(id).getElementsByTagName('input')[0] != null);
      }
 
 
      function editMode(id)                                
      { 		
        if (!hasInput(id))
        {
          var value = deleteBaliseHTML(document.getElementById(id).innerHTML);
          document.getElementById(id).innerHTML = '<input type="text" id="input_'+id+'" value="'+value+ '" />';
          document.getElementById('input_'+id).focus();
          document.getElementById(id).onclick = null;
          document.getElementById('input_'+id).onblur = function exitEdit(event){ editMode(id); }
          document.getElementById('input_'+id).onkeypress = function detectEnter(event)
          { 
            if(!event && window.event) event=window.event;
            if (event.keyCode == 13) editMode(id); 
          }
        }
        else
        {
          var texte = htmlEntities(document.getElementById('input_'+id).value);
          if (texte)
          {
            document.getElementById(id).innerHTML = texte;
            document.getElementById(id).onclick = function onclick(event){ editMode(id); }
          }
        }
      } 
 
    </script>
 
  </head>
  <body>
 
    <form method="POST" id="form">
      <p id="editable3" style="color:blue;font-weight:bold" onclick="editMode('editable3')">
        Cliquez sur le texte !!!
      </p>
    </form>
 </body>
</html>