Discussion :

[moimp]

Bonjour,

Internet Explorer bug dans le cas suivant:
- Un champ de formulaire de type input ou textarea a le focus et est affecté de l'attribut readonly,
- Si ce champ est vide et que j'appuie sur la touche backspace le navigateur revient à la page précédente comme avec le bouton de retour arrière (alt+gauche)
C'est plutôt gênant!
Pour pallier à ce défaut, j'ai écrit le bout de code suivant qui me pose un problème lorsque j'ai besoin d'utiliser l'événement blur.

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
 
// Correction d'un bug de certains navigateurs (testé avec IE11, à vérifier sur les autres versions et les autres navigateurs)
var reads	= document.querySelectorAll('input[readonly]'),
	others	= document.querySelectorAll('input:not([readonly]):not([type="submit"]):not([disabled])'),
	n		= reads.length;
for (let i=0; i<n; i++) {
	reads[i].addEventListener('focus', function(e) {
		this.blur();
		if (others.length) others[0].focus();
	}, false);
}

[Beginner.]

Salut,

Je n'ai pas IE11 mais pour le problème pourquoi ne pas intercepter la touche backspace pour annuler son effet lorsque la textearea ou la input est vide ?

[ProgElecT]

Salut

"use strict" t'oblige a déclarer les variables, others et n ne le sont pas.
Tu utilises des déclarations de variables différentes, un coup var, l'autre let, ce dernier n'est supporté par IE que depuis la version 11.

[Beginner.]

"use strict" t'oblige a déclarer les variables, others et n ne le sont pas.

Moi aussi je me suis déjà fait avoir par ça (il n'y a qu'une seule fois le mot clé "var") mais elles sont déclarées (et initialisées) : une seule fois le mot clé "var" + déclarations séparées par une virgule

[ProgElecT]

Salut

@Beginner. , vue l’indentation, les virgules, me sont passées sous le nez

[NoSmoking]

Bonjour

vue l’indentation, les virgules, me sont passées sous le nez

pour une telle déclaration de variables il existe une « convention », mais chacun fait ce qui lui plait, qui est de mettre la virgule en début de ligne

Code :

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

1
2
3
var reads = document.querySelectorAll('input[readonly]')
  , others = document.querySelectorAll('input:not([readonly]):not([type="submit"]):not([disabled])')
  , n = reads.length;

c'est normalement plus lisible mais bon, idem pour la déclaration des objets

Code :

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

1
2
3
4
5
var Individu = {
    "nom": "Durand"
  , "Prenom": "Jean"
  , "Age": "ça change tout le temps"
}

dans ce cas c'est pour facilité la modification de celui-ci.

Pour en revenir au sujet, qui est une continuité de cette discussion je dirais qu'il faut bien comprendre ce que fait ce script, hormis pourrir la vie de moimp

• on récupère tous les éléments de type <input> qui ont l'attribut readonly posé, d'une part ;
• on récupère d'autre part ce qui ne l'ont pas ;
• on affecte à chaque éléments du 1er groupe( les readonly donc) un fonction qui leur fait perdre le focus, quand il l'obtient, et qui le place sur le 1er élément du 2éme groupe ( les autres <input>).

Donc on n'aura JAMAIS accès à ces champs.

- Si ce champ est vide et que j'appuie sur la touche backspace le navigateur revient à la page précédente comme avec le bouton de retour arrière (alt+gauche)

que ce passe t-il si il n'y pas de champs « modifiable » ?

// Correction d'un bug de certains navigateurs

J'aimerais savoir de quelle bogue on parle.

[moimp]

Je vais essayer de répondre à toutes vos remarques:

1. @ProgElecT: J'utilise let à l'intérieur de la boucle et var à l'extérieur, suite à un conseil que j'ai eu (où et quand?)
2. @NoSmoking: Je ne connaissait pas cette convention, elle est intéressante. Désolé mais l'indentation a bougé avec le copier/coller.
3. @NoSmoking: Effectivement le but n'est pas d'avoir accès aux champs, mais, surtout en mise au point, d'éviter le retour intempestif vers la page précédente.

4. Si ce champ est vide et que j'appuie sur la touche backspace le navigateur revient à la page précédente comme avec le bouton de retour arrière (alt+gauche)

   Après vérification ceci se produit même si le champ n'est pas vide. C'est bien le bogue dont je parle.

5. que ce passe t-il si il n'y pas de champs « modifiable » ?

   Condition en ligne 10 de mon code.

6. J'aimerais savoir de quelle bogue on parle.

   Le retour intempestif à la page précédente qui est justement la raison d'être de ce script.

[Beginner.]

Le retour intempestif à la page précédente qui est justement la raison d'être de ce script.

Si vraiment il y a ce bug (je ne peux pas tester) eh bien as-tu essayé ce que j'avais proposé, peut-être que cela fonctionnera...


EDIT : Ah oui je crois que j'ai compris : la touche backspace a plusieurs fonctions selon le contexte, cela peut être retour à la page précédente mais normalement dans un champ texte c'est la suppression du caractère précédent qui doit avoir lieu...

Mais si le champ est "readonly" alors cette suppression de caractère n'est pas possible donc dans ce contexte la touche backspace n'aura pas cette fonction (suppression du caractère précédent), quel en serait l’intérêt ?

[Beginner.]

Après vérification ceci se produit même si le champ n'est pas vide. C'est bien le bogue dont je parle.

Apparemment c'est le cas lorsque le champ a l'attribut "readonly" (à mon avis pour les raisons expliquées dans mon message précédent) donc si tu ne veux pas du retour à la page précédente pourquoi ne pas annuler l'effet de la touche backspace pour tous les champs ayant l'attribut "readonly" ?

[moimp]

Oui, j'ai essayé avec le code suivant mais je ne m'en sors pas. Mais j'avoue que j'ai du mal à intégrer l'écriture de code en javascript.

Code :

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

1
2
3
4
5
6
var reads	= document.querySelectorAll('input[readonly]');
for (let i=0, max=reads.length; i<max; i++) {
	reads[i].addEventListener('keydown', function(e) {
		if ( e.keyCode == 8 ) { this.blur(); }
	}, false);
}

Si ce que tu dis sur la fonction de cette touche est avéré, ce ne serait pas un bogue mais il doit cependant y avoir moyen d'empêcher ce retour.

[Beginner.]

Pour empêcher le comportement par défaut tu peux faire : e.preventDefault();...

Mais attention si tu fais ça (sans condition) après tu ne pourras pas non plus supprimer le caractère précédent à l'aide de la touche backspace.

Alors je ne sais pas si tu prévois de pouvoir modifier ces champs (en enlevant le readonly au double clique ?) mais si oui alors il faudrait rajouter une condition en plus de if ( e.keyCode == 8 ), une condition pour s'assurer que le champ en question a bien l’attribut "readonly"...

Exemple :

Code :

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

1
2
3
if (e.keyCode == 8 && this.hasAttribute("readonly")) {            
    e.preventDefault();   
}

[NoSmoking]

Ce que tu décris ne sont pas des bogues, même de châtaignes, mais le comportement normal des navigateurs qui peut effectivement différer suivant ceux-ci.
Dans ce cas, comme dit par Beginner., il te faut gérer les événements clavier et faire suivant le cas, attention toutefois à ne pas détruire les habitudes d'ergonomie.

Cela pourrait simplement se traduire par l'ajout de l'observation de l'événement keydown sur tes éléments.

En reprenant ce qui a déjà été écrit

Code :

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

1
2
3
4
5
6
7
8
9
var oElements = document.querySelectorAll("form [readonly]");
var i;
var nbr = oElements.length;
for (i = 0; i < nbr; i += 1) {
  oElements[i].ondblclick = handleOnDblClick;
  oElements[i].onblur = handleOnBlur;
  // AJOUT gestion sur clavier
  oElements[i].onkeydown = handleKeyDown;
}

et par le fait la fonction handleKeyDown

Code :

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

1
2
3
4
5
function handleKeyDown(ev) {
  if (ev.altKey && ev.keyCode == 37) { // ALT + ARROW-LEFT
    ev.preventDefault();
  }
}

tu peux ajouter ce que tu veux.

[moimp]

Ce que tu décris ne sont pas des bogues, même de châtaignes, mais le comportement normal des navigateurs qui peut effectivement différer suivant ceux-ci.
Dans ce cas, comme dit par Beginner., il te faut gérer les événements clavier et faire suivant le cas, attention toutefois à ne pas détruire les habitudes d'ergonomie.

Oui, et j'ai continué mes recherches la-dessus. J'ai trouvé pas mal de questions similaires à la mienne sans jamais aucune solution.

tu peux ajouter ce que tu veux.

Effectivement, j'ai essayé d'ajouter une condition supplémentaire dans la boucle pour ne pas inhiber le fonctionnement normal de la touche backspace lorsque l'attribut readonly est absent sur le champ en cours de modification et je ne m'en sors pas. Et là, la ligne 4 renvoie toujours cet attribut. Par ailleurs, je voudrais déclencher handleOnBlur sur action de la touche 'Entrer' si le champ n'est pas un textarea (ligne 8)

Code :

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

1
2
3
4
5
6
7
8
9
for (let i=0, max=fields.length; i<max; i++) {
	fields[i].ondblclick	= handleOnDblClick;
	fields[i].onblur		= handleOnBlur;
	console.log(fields[i]);
	if ( fields[i].getAttribute('readonly') != 'readonly' ) {
		fields[i].onkeydown		= handleKeyDown;
	}
	//fields[i].onkeypress	= ( fields[i].type != 'textarea' && fields[i].keyCode == '13' ) ? handleOnBlur: '';
}

[Beginner.]

Effectivement, j'ai essayé d'ajouter une condition supplémentaire dans la boucle pour ne pas inhiber le fonctionnement normal de la touche backspace lorsque l'attribut readonly est absent sur le champ en cours de modification et je ne m'en sors pas.

Ben je ne te comprends pas trop là car c'est exactement ce à quoi je t'ai répondu dans mon message précédent dans lequel j'avais donné cet exemple :

Code :

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

1
2
3
if (e.keyCode == 8 && this.hasAttribute("readonly")) {            
    e.preventDefault();   
}

A mon avis elem.hasAttribute("readonly") est meilleur que elem.getAttribute('readonly') != 'readonly' ) pour plusieurs raisons :

- Si l'attribut n'est pas présent que va donner getAttribute() ?

- Si l'attribut est présent mais que sa valeur est vide (readonly ou readonly = "") et non égal à "readonly" (readonly = "readonly") comme cela arrive parfois (notamment avec ton code de l'autre fil : elem.setAttribute("readonly", "") au lieu de ce que proposait NoSmoking : elem.setAttribute("readonly", "readonly") ou encore comme vu dans ce fil : readonly sur toute la page où l'on a vu qu'on pouvait faire elem.readOnly = true dans ce cas-là j'ai vu que sur l’élément on a juste readonly et non readonly = "readonly"...) alors dans ce cas elem.getAttribute('readonly') risque d'être différent de 'readonly' et donc la condition elem.getAttribute('readonly') != 'readonly' ) sera vraie alors que l’élément sera bien en readonly...


Et attention la fonction handleKeyDown(ev) de NoSmoking concerne les touches "ALT + ARROW-LEFT" comme il l'a indiqué en commentaire et non la touche backspace alors si tu ne l'as pas adapté à ton besoin alors c'est clair que cela ne va pas fonctionner...

Et là, la ligne 4 renvoie toujours cet attribut.

La ligne 4 ? C'est cette instruction console.log(fields[i]); ?

Si oui ben c'est normal puisque les champs ont par défaut l'attribut "readonly" et qu'à ce moment de la boucle tu ne l'as pas supprimé (le gestionnaire du double-clique qui supprime l'attribut est affecté aux champs dans cette même boucle donc tu ne peux pas l'avoir actionné au moment de l’exécution de la ligne 4).

[moimp]

Ben je ne te comprends pas trop là car c'est exactement ce à quoi je t'ai répondu dans mon message précédent dans lequel j'avais donné cet exemple :

Tout simplement car au fil de la discussion qui commence à être longue, je ne l'avais pas vu. Désolé. En tous cas merci parce que ça marche et tes explications sont claires.

Et attention la fonction handleKeyDown(ev) de NoSmoking concerne les touches "ALT + ARROW-LEFT" comme il l'a indiqué en commentaire et non la touche backspace alors si tu ne l'as pas adapté à ton besoin alors c'est clair que cela ne va pas fonctionner...

J'avais vu et j'ai bien adapté.

La ligne 4 ? C'est cette instruction console.log(fields[i]); ?

Si oui ben c'est normal puisque les champs ont par défaut l'attribut "readonly" et qu'à ce moment de la boucle tu ne l'as pas supprimé (le gestionnaire du double-clique qui supprime l'attribut est affecté aux champs dans cette même boucle donc tu ne peux pas l'avoir actionné au moment de l’exécution de la ligne 4).

C'est ce que je ne comprends pas car l'appel au gestionnaire du double clic est situé avant dans la boucle.

Je vais essayer de gérer la ligne 8 en commentaire et je reviens vers vous si nécessaire. En tous cas merci pour votre aide à tous les deux. J'apprécie.

[Beginner.]

C'est ce que je ne comprends pas car l'appel au gestionnaire du double clic est situé avant dans la boucle.

Ben justement ceci fields[i].ondblclick = handleOnDblClick; n'est pas un "appel au gestionnaire du double clic" c'est-à-dire que la fonction handleOnDblClick n'est pas exécutée, rappelle-toi ce que je t'avais expliqué :

Ben si justement pour appeler (exécuter) une fonction on doit mettre les parenthèses...

Alors oui il y a le nom d'une fonction et l'exécution d'une fonction :

- Le nom de la fonction + les parenthèses ---> exécution.

Donc quand tu fait par exemple : var res = maFonction() ; tu exécutes la fonction "maFonction" et le résultat retourné par cette fonction sera affecté à la variable "res" et si la fonction ne retourne rien alors c'est "undefined" qui sera affecté à la variable res.

- Par contre si tu fait ça : var res = maFonction ; tu n'exécutes pas la fonction "maFonction", tu affectes à la variable "res" la référence à cette fonction. Ce qui signifie que "res" et "maFonction" pointe vers la même référence du coup tu peux exécuter la fonction en faisant res() ou maFonction() cela fera la même chose.

Donc ici on est dans le deuxième cas c'est la référence à la fonction handleOnDblClick qui est affectée et la fonction ne sera exécutée que lorsqu'il y aura un double clique...

[moimp]

Donc ici on est dans le deuxième cas c'est la référence à la fonction handleOnDblClick qui est affectée et la fonction ne sera exécutée que lorsqu'il y aura un double clique...

Ah d'accord! J'ai relu plusieurs fois ton explication mais c'est justement ça que je n'avais pas compris. Maintenant c'est plus clair!

J'ai essayé d'ajouter deux nouveaux fonctionnement qui me créent quelques soucis:

1. Si je ne suis pas sur une zone de texte, je veux avoir le même effet en appuyant sur la touche 'enter' qu'avec l’événement blur.
2. Sur le champ n°2 (fields[2]) je souhaite transformer le champ en liste d'options. Ensuite lors de la validation, je remplace la liste d'options par mon champ input qui prend la valeur sélectionné dans la liste. Le problème étant que les listes d'options n'acceptent pas l'attribut readonly.

Avant de vous donner mon code modifié, je me demande si je dois continuer sur ce fil ou si je dois en ouvrir un nouveau.
EDIT:
Je vous donne mon code dans son état actuel:

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
"use strict";
 
const
	inclForm	= window.document.querySelector('.displCard'),
	fields		= window.document.querySelectorAll('.displCard [readonly]'),
	country		= window.document.querySelector('.displCard #country');
 
function handleOnDblClick() {
	if ( this.name == 'pays' ) {
		country.innerHTML = fromPHPtoJS.lstCountries;
	}
	this.removeAttribute('readonly');
	this.select();
}
 
function handleOnBlur() {
	this.setAttribute('readonly', 'readonly');
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
}
// Le dernier caractère saisi ou supprimé avant la touche 'enter' n'est pas pris en compte
function handleKeyPress(e) {
	if ( e.keyCode == 13 && this.type != 'textarea' ) { inclForm.submit(); }
}
 
function listOnDblClick(e) {
	this.innerHTML = fromPHPtoJS.lstCountries; // Contient la liste d'options complète
}
 
function listOnBlur() {
	console.log(fields[2]);
	alert('listOnBlur');
	fields[2].value = this.firstChild.selectedIndex;
	this.innerHTML = fields[2];
	inclForm.preventDefault(); // Pour mise au point
	//inclForm.submit(); // En attente de mise au point
}
 
country.ondblclick	= listOnDblClick;
country.onblur		= listOnBlur;
for (let i=0, max=fields.length; i<max; i++) {
	fields[i].ondblclick	= handleOnDblClick;
	if ( i != 2 ) { fields[i].onblur = handleOnBlur; }
	fields[i].onkeydown		= handleKeyDown;
	fields[i].onkeypress	= handleKeyPress;
}

Dans ce code, deux dysfonctionnements:
Point 1: function handleKeyPress(e): Voir commentaire
Point 2: La fonction function listOnBlur() n'est jamais appelée.

[NoSmoking]

Tout d'abord Beginner.

Personnellement, la question que je me pose encore est mais pourquoi une telle ergonomie qui ne l'est pas !?!

Avant de vous donner mon code modifié, je me demande si je dois continuer sur ce fil ou si je dois en ouvrir un nouveau.

Si l'on ne considère que la question du début, « Corriger un bug de IE11 » il t'a été montré comment résoudre ton problème, on peut donc considérer que cette discussion est close

[moimp]

OK, je marque ce sujet comme résolu et j'en ouvre un autre pour les compléments.

[NoSmoking]

Résolue mais point de réponse à mon interrogation

Personnellement, la question que je me pose encore est mais pourquoi une telle ergonomie qui ne l'est pas !?!