Discussion :

[lextaz33]

Bonjour à tous,
J'ai une jsp avec un html:form qui a pour action evenement?dispatch=save!
Logique!

J'ai dans cette jsp un champ suggest et lorsque que je clic avec la souris sur la valeur choisit OK, mais lorsque j'utilise la touche entrer, en plus d'executer l'action de mon suggest qui est evenement.do?dispatch=reInitCombo, il passe ensuite par l'action du formulaire (save).

Or avant de faire l'action evenement.do?dispatch=reInitCombo, je met le focus sur mon champ texte pour éviter le bouton submit mais ce n'est pas la solution.

Donc comment puis je éviter que la touche entrer n'exécute l'action de mon formulaire??

Le javascript pour mon suggest est le suivant, je met le focus sur _inputField1 puis j'execute l'action voulu:

Code :

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

1
2
3
4
 
_inputField1.focus();
var url1 = "./evenement.do?dispatch=reInitCombo&type=soc";document.forms["formulaire"].action = url1;
document.forms["formulaire"].submit();

j'ai tenté de mettre action="" dans le html:form mais erreur struts!

[lextaz33]

Personne?

Je souhaite utiliser la touche entrer pour sélectionner une valeur dans une liste de suggestion positionnée dans une div (pas de problème pour ça).

Quand j'appuie sur entrer, l'action du formulaire s'exécute avant d'exécuter l'action que je lui demande.

Mais comment éviter que la touche entrer n'exécute l'action défini dans <html:form action="">???

[BugFactory]

Vous pourriez essayer d'intercepter l'événement de la touche enter:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function stopEnter(e) {
    var keyNumber;
    if(window.event) {
        // Cas IE
        keyNumber = window.event.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keyNumber = e.which;
    }
    return keyNumber != 13
}
 
document.onkeypress = stopEnter;

Non testé.

[lextaz33]

Eh bien en fait j'intercepte déjà l'évènement de la touche entrer pour mon champ de suggestion.
Lorsque je reçoit l'évènement, je lui fait exécuter une action : "evenement.do?dispatch=reInitCombo"

Sauf qu'il exécute l'action du formulaire en premier.

[BugFactory]

Oui, mais ici, on renvoie false si la touche est entrée, ce qui annule le poursuite de la gestion de l'événement.

[lextaz33]

Voici le code que j'ai:

Code :

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
 
function handleCursorUpDownEnter(eventCode){
  if(eventCode==40){
    highlightNewValue(_highlightedSuggestionIndex+1);
    return false
  }else if(eventCode==38){
    highlightNewValue(_highlightedSuggestionIndex-1);
    return false
  }else if(eventCode==13||eventCode==3){
  	var url = "./evenement.do?dispatch=reInitCombo&type=cont";
       _inputField.focus();
	document.forms["formulaire"].action = url;	
	document.forms["formulaire"].submit();
	_inputField.focus();
    return false
  }
  return true
}

Avant dans la boucle else if(eventCode==13||eventCode==3), il n'y avait que return false.
Mais j'ai besoin de l'action sur cette touche c'est pourquoi j'ai rajouté ce bout de code.

[BugFactory]

Pouvez vous ajouter une alerte ici :

Code :

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

1
2
3
        _inputField.focus();
        alert("Evénement intercepté");
        return false;

pour vérifier que l'événement est bien intercepté et me dire ce que ça donne?

[lextaz33]

Oui l'événement est bien intercepté, l'alerte s'affiche et n'est pas bloquante.
Le problème est toujours le même, submit du formulaire suivi du submit que je demande. Donc un submit en trop toujours.

[BugFactory]

Ok. Est-ce que vous pouvez me montrer le code qui appelle handleCursorUpDownEnter ?

[lextaz33]

Voici le code ou est appelé handleCursorUpDownEnter()

Code :

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
43
44
45
46
47
48
49
50
51
 
var onKeyUpHandler=function(event){
  // accès evenement compatible IE/Firefox
  if(!event&&window.event) {
    event=window.event;
  }
  _eventKeycode=event.keyCode;
  // Dans les cas touches touche haute(38) ou touche basse (40)
  if(_eventKeycode==40||_eventKeycode==38) {
    // on autorise le blur du champ (traitement dans onblur)
    blurThenGetFocus();
  }
  // taille de la selection
  var N=rangeSize(_inputField);
  // taille du texte avant la selection (selection = suggestion d'autocomplétion)
  var v=beforeRangeSize(_inputField);
  // contenu du champ texte
  var V=_inputField.value;
  if(_eventKeycode!=0){
    if(N>0&&v!=-1) {
      // on recupere uniquement le champ texte tapé par l'utilisateur
      V=V.substring(0,v);
    }
    // 13 = touche entrée
    if(_eventKeycode==13||_eventKeycode==3){
      var d=_inputField;
      // on mets en place l'ensemble du champ texte en repoussant la selection
      if(_inputField.createTextRange){
        var t=_inputField.createTextRange();
        t.moveStart("character",_inputField.value.length);
        _inputField.select()
      } else if (d.setSelectionRange){
        _inputField.setSelectionRange(_inputField.value.length,_inputField.value.length)
      }
    } else {
      // si on a pas pu agrandir le champ non selectionné, on le mets en place violemment.
      if(_inputField.value!=V) {
        _inputField.value=V
      }
    }
  }
  // si la touche n'est ni haut, ni bas, on stocke la valeur utilisateur du champ
  if(_eventKeycode!=40&&_eventKeycode!=38) {
    // le champ courant n est pas change si key Up ou key Down
  	_currentInputFieldValue=V;
  }
  if(handleCursorUpDownEnter(_eventKeycode)&&_eventKeycode!=0) {
    // si on a préssé une touche autre que haut/bas/enter
    PressAction();
  }
}

Ici la fonction PressAction() appelé après handleCursorUpDownEnter()

Code :

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
function PressAction(){
  _highlightedSuggestionIndex=-1;
  var suggestionList=_completeDiv.getElementsByTagName("div");
  suggestionID = _completeDivID.getElementsByTagName("div");
  var suggestionLongueur=suggestionList.length;
  // on stocke les valeurs précédentes
  // nombre de possibilités de complétion
  _completeDivRows=suggestionLongueur;
  // possiblités de complétion
  _completeDivDivList=suggestionList;
  _completeDivIDList=suggestionID;
  // si le champ est vide, on cache les propositions de complétion
  if(_currentInputFieldValue==""||suggestionLongueur==0){
    hideCompleteDiv()
  }else{
    showCompleteDiv()
  }
  var trouve=false;
  // si on a du texte sur lequel travailler
  if(_currentInputFieldValue.length>0){
    var indice;
    // T vaut true si on a dans la liste de suggestions un mot commencant comme l'entrée utilisateur
    for(indice=0; indice<suggestionLongueur; indice++){
      if(getSuggestion(suggestionList.item(indice)).toUpperCase().indexOf(_currentInputFieldValue.toUpperCase())==0) {
      	index = indice;
        trouve=true;        
        break
      }
    }
  }
  // on désélectionne toutes les suggestions
  for(var i=0; i<suggestionLongueur; i++) {
    setStylePourElement(suggestionList.item(i),"AutoCompleteDiv");
  }
  // si l'entrée utilisateur (n) est le début d'une suggestion (n-1) on sélectionne cette suggestion avant de continuer
  if(trouve){
    _highlightedSuggestionIndex=indice;
    _highlightedSuggestionDiv=suggestionList.item(_highlightedSuggestionIndex);
    _highlightedSuggestionDivID=suggestionID.item(_highlightedSuggestionIndex);
  }else{
    _highlightedSuggestionIndex=-1;
    _highlightedSuggestionDiv=null
    _highlightedSuggestionDivID=null
  }
  var supprSelection=false;
  switch(_eventKeycode){
    // cursor left, cursor right, page up, page down, others??
    case 8:
    case 33:
    case 34:
    case 35:
    case 35:
    case 36:
    case 37:
    case 39:
    case 45:
    case 46:
      // on supprime la suggestion du texte utilisateur
      supprSelection=true;
      break;
    default:
      break
  }
  // si on a une suggestion (n-1) sélectionnée
  if(!supprSelection&&_highlightedSuggestionDiv){
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
    var z;
    var w;
    if(trouve) {
      z=getSuggestion(_highlightedSuggestionDiv).substr(0);
      w=getSuggestion(_highlightedSuggestionDivID).substr(0);
    } else {
      z=_currentInputFieldValue;
    }
    if(z!=_inputField.value){
      if(_inputField.value!=_currentInputFieldValue) {
        return;
      }
      // si on peut créer des range dans le document
      if(_inputField.createTextRange||_inputField.setSelectionRange) {
        _inputField.value=z;
        _inputFieldID.value=w;
      }
      // on sélectionne la fin de la suggestion
      if(_inputField.createTextRange){
        var t=_inputField.createTextRange();
        t.moveStart("character",_currentInputFieldValue.length);
        t.select()
      }else if(_inputField.setSelectionRange){
        _inputField.setSelectionRange(_currentInputFieldValue.length,_inputField.value.length)
      }
    }
  }else{
    // sinon, plus aucune suggestion de sélectionnée
    _highlightedSuggestionIndex=-1;
  }
}

Tout ce code est issu du tutoriel Ajax, une autocomplétion pas à pas trouvé sur le forum.

[BugFactory]

1. event.keyCode est spécifique à Internet Explorer. Utilisez event.which pour les autres navigateurs.

2. C'est la fonction qui répond à l'événement qui doit renvoyer true / false. Ici le retour de handleCursorUpDownEnter n'est pas transmis.

[lextaz33]

D'accord, par contre je ne comprend pas bien ce que je dois faire concernant

2. C'est la fonction qui répond à l'événement qui doit renvoyer true / false. Ici le retour de handleCursorUpDownEnter n'est pas transmis.

Je dois changer quoi en fait?
Je dois modifier la fonction PressAction(), handleCursorUpDownEnter(),...??

[lextaz33]

OK sinon je peut poser la question plus simplement:

Comment empêcher que la touche entrée n'importe ou dans un formulaire (entrée sur un champ X ou y) ne valide l'envoi de celui-ci???

Comment dire à struts, ne valide le formulaire que si je clic sur le bouton enregistrer, et si j'appuie sur entré c'est moi qui choisit!!

[lextaz33]

Pour ceux que ça intéresse, j'ai du contourner le problème:

La solution que j'ai trouvé consiste à modifier mon <html:submit> par un <html:button avec onclick="action save">!

C'est la seule chose qui empêche la validation par la touche entrée.
Seul inconvénient, mes utilisateurs devront bouger leur petite mimine jusqu'à la souris et aller cliquer sur le bouton!

Trop dur!