Remplacement d'un champ input par une liste d'options selon l'état de l'attribut readonly
Bonjour à tous.
Les listes d'options ne prennent pas en compte l'attribut readonly. Je veux donc afficher un champ input avec l'attribut readonly et le remplacer par une liste d'options en l'absence de cet attribut. Parce que je ne vois pas comment traiter la liste d'options comme le reste.
Code:
<label>Pays</label><span id="country"><input type="text" name="pays" value="<?= $address->pays; ?>" readonly /></span><br/>
Dans le code qui suit la fonction listOnBlur n'est pas appelée. Pourquoi?
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
| "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(); }
}
function listOnDblClick(e) {
this.innerHTML = fromPHPtoJS.lstCountries; // Contient la liste d'options complète
}
// Pourquoi cette fonction n'est jamais utilisée ??
function listOnBlur() {
console.log(fields[2]);
alert('fonction listOnBlur');
fields[2].value = this.firstChild.selectedIndex;
this.innerHTML = fields[2];
//inclForm.preventDefault(); // Pour mise au point
inclForm.submit(); // Après 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;
} |
