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
| "use strict";
//const
var
inclForm = document.querySelector('.displCard')
, inputs = document.querySelectorAll('.displCard input, .displCard textarea')
, countriesList = document.querySelector('.displCard select[name="pays"]')
, countriesOptions = countriesList.options
, countrySelected = countriesList.options[countriesList.selectedIndex]
;
console.log('a',countriesList); // Liste avec seulement l'option sélectionnée. Pourquoi n'est-elle pas complète avec toutes les options
console.log('b',countriesOptions); // J'ai exactement la même chose qu'en 'a'. Pourquoi je n'ai pas que l'option?
console.log('c',countriesList.options); // J'ai exactement la même chose qu'en 'b'.
console.log('d',countrySelected); // Affichage attendu = option sélectionnée
// Modification des champs
// #######################
function initCountriesList() {
console.log(1,countriesList); // Pourquoi comme en 'a', la liste ne contient que l'option sélectionnée? Sans appel à ce script, elle s'affiche entièrement.
countriesList.innerHTML = '';
console.log(2,countriesList); // Normal: liste vide
countriesList.appendChild(countrySelected);
console.log(3,countriesList); // Option sélectionnée mais sans le texte ente les balises d'ouverture et de fermeture de l'option
}
// Donne une liste vide
window.onload = function(){
initCountriesList();
}
/*
// Donne une liste vide
document.addEventListener('DOMContentLoaded', function(e) {
initCountriesList();
}, false );
*/
// La suite fonctionn sauf la condition keyCode = 13. Les modifications du champ ne sont pas prises en compte
function handleOnDblClick() {
this.readOnly = false;
this.select();
}
function handleOnBlur() {
this.readOnly = true;
inclForm.action = 'editField.php?field='+this.name;
inclForm.submit();
}
function handleKeyDown(e) {
if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
if ( e.keyCode == 13 && this.type != 'textarea' ) { inclForm.submit(); }
}
for (let i=0, max=inputs.length; i<max; i++) {
inputs[i].ondblclick = handleOnDblClick;
inputs[i].onblur = handleOnBlur;
inputs[i].onkeydown = handleKeyDown;
} |
Remplacement d'un champ input par une liste d'options selon l'état de l'attribut readonly
Répondre avec citation
Autant je m'en sors à peu près avec PHP, autant j'ai de grosses difficultés avec JavaScript dont je n'arrive pas à comprendre la logique, principalement en ce qui concerne la chronologie des événements et du code.
Envoyé par moimp
: "afficher/masquer des div au clic").
Partager