Déplacer une div à un endroit précis

Version imprimable

03/12/2019, 12h37
feelwatt

Déplacer une div à un endroit précis

Bonjour,

Pour remplir chacun des champs d'un formulaire,
je propose à l'utilisateur de cliquer sur des boutons,

Donc l'utilisateur clique sur un champs
1- je récupère l'id du champs
2- J'affiche la div contenant les boutons, pour qu'il choisisse qu'elle valeur mettre dans ce champs (cliqué)
3- avec une fonction js je rempli le champs avec la valeur du bouton

Donc les boutons sont dans une div,
> j'aimerais faire en sorte que cette div s'affiche à chaque fois sous le champs cliqué.

(Je ne sais si mon explication est claire :?)
Merci pour vos lumières

Salut,

Alors, c'est très schématique mais voilà une idée:

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
<form id="f">
	<div>
		<input type="text" id="t1" />
	</div>
	<div>
		<input type="text" id="t2" />
	</div>
	<div>
		<input type="text" id="t3" />
	</div>
	<div>
		<input type="text" id="t4" />
	</div>
</form>
 
 
<script>
 
for(i=0;i<document.forms["f"].elements.length;i++){
        document.forms["f"].elements[i].addEventListener("focus",(e)=>{
                let champ=e.target;
                if(document.getElementById("mobile")){
                document.getElementById("mobile").parentElement.removeChild(document.getElementById("mobile"))
                };
                let p=document.createElement("p");
                p.id="mobile";
                let b1=document.createElement("button");
                b1.textContent="choix " + champ.id + " n°1";
                b1.addEventListener("click",(e)=>{e.preventDefault();champ.value=e.target.textContent},false)
                        
                let b2=document.createElement("button");
                b2.textContent="choix " + champ.id + " n°2";
                b2.addEventListener("click",(e)=>{e.preventDefault();champ.value=e.target.textContent},false)
                e.target.parentElement.appendChild(p);
                p.appendChild(b1)
                p.appendChild(b2)
                                
        },false)
}
</script>

Problèmes:

J'imagine que tu as des options et un nombre de boutons personnalisés pour chaque champ

Recréer la div à chaque fois n'est peut-être pas le plus propre, mais j'attends de savoir ce que vas préciser

Créer un select te permettrait une gestion plus fluide, ergonomique et tout et tout;

03/12/2019, 13h52
feelwatt

Merci javatwister,
c'est une idée, supprimer puis recréer la div à un endroit différent.

J'aurais peut être vu un truc du genre:
sur le click : " la div est relative au champs cliqué"
ce qui la déplacerait.
Mais je ne sais pas si c'est possible...
03/12/2019, 14h02
javatwister

Bien sûr mais c'est du pareil au même puisque la div va changer de contenu; j'ai fait un truc comme ça autrefois en css, avec des zones cachées qui apparaissaient au survol. Mais si tu veux paramétrer les choix de manière un peu dynamique, mieux vaut passer par un tableau javascript qui gère les valeurs adéquates; ça allège aussi considérablement le HTML.
03/12/2019, 14h03
Invité

Bonjour,

je ne vois pas l'intérêt.
De simples <select> suffisent... ~~et sont certainement plus ergonomiques~~.
03/12/2019, 14h07
feelwatt

En fait la div ne vas pas changer de contenu.

Pour info, la finalité c'est que l’utilisateur renseigne les champs pour les entêtes et pieds de page de ses documents pdf,
donc il y a 2 colonnes en entête avec chacune 3 lignes
et 3 colonnes en pied de page avec chacune 3 lignes.

Il clique sur un champs et choisi d'y mettre son nom, son adresse etc...
Le div reste le même.
03/12/2019, 14h08
feelwatt

Citation:

Envoyé par jreaux62

Bonjour,

je ne vois pas l'intérêt.
De simples <select> suffisent... et sont certainement plus ergonomiques.

Ouais des <select>, par contre je voudrais laisser la possibilité d'y écrire du texte libre.
03/12/2019, 14h16
Invité

Citation:

Envoyé par feelwatt

...laisser la possibilité d'y écrire du texte libre.

Oui, j'y ai pensé après coup.

Mais alors, pourquoi ne pas simplement pré-remplir chacun des <input> avec les données (nom, adresse,...) ?
Ça éviterait un tas de clics inutiles.
03/12/2019, 14h26
javatwister

Ben oui. Et un simple champ texte "libre" avec pour value "autre information"; Le problème avec la saisie libre, c'est toujours le contrôle...
03/12/2019, 14h26
feelwatt

Citation:

pourquoi ne pas simplement pré-remplir chacun des <input> avec les données (nom, adresse,...) ?
Ça éviterait un tas de clics inutiles.

Pour laisser le choix...
Et je souhaite laisser la possibilité de mettre par ex: click sur buton 'Nom' puis sur 'prénom'
03/12/2019, 14h28
Invité
Tu l'as déjà vu sur un autre site ?
Oui ? Non ?
Demande-toi pourquoi....

Dans 99% des cas, si on propose une "version par défaut" *, les gens ne modifieront rien (ou peu).

* exemple :
- Civilité Prénom NOM
- adresse 1
- adresse 2
- CP VILLE (Pays)
03/12/2019, 15h06
feelwatt

J'ai vu un truc encore mieux, qui
pemet de structurer un doc pdf
assez ergonomique > on déplace des champs sur la structure du doc pdf
> digiforma.com
A voir... Mais bon,

Pour ma part j'ai placé mon div à un endroit logique et accessible.
Je vous remercie de l'attention et des proposition.
Et que vive developpez.net :merci: