La date/heure actuelle est Ven 29 Mar - 9:19
1 résultat trouvé pour my_id
Créer un générateur de code
Bonjour,J'ai donc choisi un code un peu plus simple .
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>générateur de ...</title>
<style>
header{ font-size: 1.9em; text-align: center; font-variant: small-caps; }
div, form{
width: 48%;
margin-right: 1%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.input{ border-radius: 5px; border-style: solid;}
</style>
</head>
<body>
<header>Bienvenue sur le générateur de ...</header>
<form action="#" class="gen">
<label>Titre<br><input class="input" type="text" name="title" id="title" size="45"><br></label>
<label>Contenu<br><textarea class="input" name="content" id="content" cols="80" rows="47"></textarea></label>
</form>
<div class="result">
<label>Résultat<br><textarea class="input" name="result" id="result" cols="95" rows="50" readonly></textarea></label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(function($){
$('.input').on({
keyup: function(){
var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();
$('#result').val(r);
},
change: function(){
var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();
$('#result').val(r);
}
});
});
</script>
</body>
</html>
Dans le code vous aurez deux choses à faire pour ajouter un champ :
Créer le champ en HTML
Avec pour code quelque chose comme :- Code:
<label>Nom de mon champ<br><input class="input" type="mon_type" name="my_name" id="my_id" size="45"><br></label>
La démarche après est simple :- On remplace "Nom de mon champ" par le nom qu'on veut donner au champ.
- La class "input" doit rester la même peu importe le type du champ.
- Le type peut être changé :
- Par défaut le type est "text" mais il peut être "password" ce qui serait pas très utile étant donné qu'on retranscrit les valeurs des champs en claire dans un textarea à côté.
Il peut être aussi de type "radio"* (case à choix unique), "checkbox"* (case à choix multiples).
*L'attribut name doit être le même pour tout les choix d'une même question.
Note : les champs peuvent être aussi des <textarea></textarea> et <select>...</select> l'important étant qu'ils aient également la class "input".
Modifier la variable Javascript
La variable r réunie ici la valeur de nos deux champs dont celle du titre entre les balises BBcode "h1" :- Code:
var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();
Pour récupérer la valeur d'un champ on écrit (en remplaçant seulement "#my_id" par l'id du champ que l'on veut récupérer) :
- Code:
$('#my_id').val()
les + sont la pour faire le lien entre une chaine de caractères entourée par les apostrophes et le code Javascript récupérant nos valeurs.
\n placé dans une chaine de caractères créer un passage de ligne.
Pour finir le ; doit rester à la fin de la variable.
Si vous ne comprenez pas quelque chose ou que vous planchez sur le code n'hésitez pas .
- le Sam 24 Jan - 11:35
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Créer un générateur de code
- Réponses: 7
- Vues: 1740