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 html : Sélectionner tout - Visualiser dans une fenêtre à part
<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 : 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
"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;
}