Générer des DIV à partir d'une valeur texte
Résolu
olidol
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite générer des div à partir d'une valeur texte récupérée d'un input text.
Exemple, j'écris dans mon input "test", cela me créé en html quelque chose de cette ordre là :
<div class="t"> T </div>
<div class="e"> E </div>
<div class="s"> S </div>
<div class="t"> T </div>
L'objectif final est de pouvoir proposer au visiteur d'écrire un texte (via input) qui sera réinterprété en image (1 image = 1 lettre) dans une div prévue spécialement à cet effet.
J'arrive actuellement à récupérer ce que l'utilisateur rédige, à l'affiche, à décomposer ce message lettre par lettre pour pouvoir les manipuler, mais je bloque à ce niveau : je souhaite remplacer ces lettres par des <div class="a"> </div>, <div class="b"> </div>,<div class="c"> </div>...
J'ai l'impression que je ne peux pas mettre autant d'html que je le voudrai avec le replace ? On m'a parlé de boucle également ? Voici mon code.
En exemple je peux vous citer ce site : http://www.google-type.com/ à la différence que ce site va carrément chercher des images dans google image, pour ma part tout doit être directement sur mon serveur.
Je profite de mon premier message pour féliciter cette communauté qui m'a apporté beaucoup de solutions dans de nombreux domaines, mais aujourd'hui, le formulaire de recherche ne suffit plus. Merci à vous.
Olivier
Je souhaite générer des div à partir d'une valeur texte récupérée d'un input text.
Exemple, j'écris dans mon input "test", cela me créé en html quelque chose de cette ordre là :
<div class="t"> T </div>
<div class="e"> E </div>
<div class="s"> S </div>
<div class="t"> T </div>
L'objectif final est de pouvoir proposer au visiteur d'écrire un texte (via input) qui sera réinterprété en image (1 image = 1 lettre) dans une div prévue spécialement à cet effet.
J'arrive actuellement à récupérer ce que l'utilisateur rédige, à l'affiche, à décomposer ce message lettre par lettre pour pouvoir les manipuler, mais je bloque à ce niveau : je souhaite remplacer ces lettres par des <div class="a"> </div>, <div class="b"> </div>,<div class="c"> </div>...
J'ai l'impression que je ne peux pas mettre autant d'html que je le voudrai avec le replace ? On m'a parlé de boucle également ? Voici mon code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function showMsg(){
var userInput = document.getElementById('userInput').value;
var userInputSplit=userInput.split("");
document.getElementById('userMsg').innerHTML = userInputSplit;
}
</script>
</head>
<body>
<p id="userMsg"></p>
<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" value="ecrivez ici" />
</body>
</html>
En exemple je peux vous citer ce site : http://www.google-type.com/ à la différence que ce site va carrément chercher des images dans google image, pour ma part tout doit être directement sur mon serveur.
Je profite de mon premier message pour féliciter cette communauté qui m'a apporté beaucoup de solutions dans de nombreux domaines, mais aujourd'hui, le formulaire de recherche ne suffit plus. Merci à vous.
Olivier
A voir également:
- Générer des DIV à partir d'une valeur texte
- Creer un groupe whatsapp a partir d'un autre groupe - Guide
- Comment faire une recherche à partir d'une photo - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Créer une icone à partir d'une image - Guide
2 réponses
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function showMsg(){
var userInput = document.getElementById('userInput').value;
var userArray=userInput.split(""); //c'est un array
//boucle sur l'array
var sortie="";
for (i=0;i< userArray.length;i++){
sortie += '<div class="'+userArray[i].toLowerCase()+'">'+userArray[i]+'</div>';
//toLowerCase convertit la mettre en minuscule
}
document.getElementById('userMsg').innerHTML = sortie;
}
</script>
</head>
<body>
<p id="userMsg"></p>
<input type="input" maxlength="40" id="userInput" onClick="this.value='';" onkeyup="showMsg()" value="ecrivez ici" />
</body>
</html>
Merci