 SELFHTML actuel Articles spécialisés JavaScript |
|
 |
Torsten Anacker:
|
 |
|
 |
|
| E-Mail: |  torsten@anaboe.net |
|---|
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
Les formulaires sont une partie intégrante de nombreuses pages Internet. Ils sont souvent utilisés pour permettre au visiteur de faire des inscriptions dans les livres de visite, dans les forums, dans les blogues et autres. Pour pouvoir structurer l'aspect de ces enregistrements par exemple par l'affichage de liens hypertexte ou par la mise en valeur de passages de texte, le formatage de données distinctes à l'aide de ce qu'on appelle des BBcodes est souvent proposé. Il faut pour cela que soit proposée à l'utilisateur une possibilité pratique d'utiliser ces formatages dans un formulaire, sans exiger de sa part des connaissances détaillées sur les BBcodes ou sur HTML.
Le code JavaScript présenté ici permet à l'appel d'une fonction d'insérer du BBcode ou même des repères HTML dans un champ de saisie à plusieurs lignes. Sont également possibles l'insertion d'éléments vides ainsi que le formatage de texte sélectionné.
| |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Insertion de contenu dans un champ de saisie à plusieurs lignes</title>
<script type="text/javascript">
<!--
function insertion(repdeb, repfin) {
var input = document.forms['formulaire'].elements['saisie'];
input.focus();
/* pour l'Explorer Internet */
if(typeof document.selection != 'undefined') {
/* Insertion du code de formatage */
var range = document.selection.createRange();
var insText = range.text;
range.text = repdeb + insText + repfin;
/* Ajustement de la position du curseur */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -repfin.length);
} else {
range.moveStart('character', repdeb.length + insText.length + repfin.length);
}
range.select();
}
/* pour navigateurs plus récents basés sur Gecko*/
else if(typeof input.selectionStart != 'undefined')
{
/* Insertion du code de formatage */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
/* Ajustement de la position du curseur */
var pos;
if (insText.length == 0) {
pos = start + repdeb.length;
} else {
pos = start + repdeb.length + insText.length + repfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* pour les autres navigateurs */
else
{
/* requête de la position d'insertion */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Insertion du code de formatage */
var insText = prompt("Veuillez entrer le texte à formater:");
input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
}
}
//-->
</script>
</head>
<body>
<h1>Démo: Insertion de contenu dans un champ de saisie à plusieurs lignes</h1>
<p>Positionnez simplement le curseur dans le champ de saisie ou marquez-y du texte.
Choisissez ensuite "Insérer" pour insérer <code>[link]...[/link]</code> à cet endroit, dans la mesure où votre navigateur le permet.</p>
<form name="formulaire" action="">
<p><textarea name="saisie" cols="30" rows="10">Votre message</textarea></p>
<p><input type="button" value="Insérer" onClick="insertion('[link]', '[/link]')"></p>
</form>
</body>
</html>
|
Dans le passage HTML de la page est défini un simple formulaire avec un champ de saisie à plusieurs lignes, occupé par un texte standard par défaut, pour démontrer le mode de fonctionnement du script. En cliquant sur le bouton "Insérer" la fonction insertion est appelée avec les paramètres correspondants (repère de début et repère de fermeture). Elle doit formater le texte sélectionné en tant que lien d'après le schéma [link]http://www.exemple.org[/link] ou bien insérer un élément de lien vide, si aucun texte n'a été sélectionné.
La fonction insertion commence par sauvegarder dans la variable input une référence au champ de saisie. Pour ce faire sont utilisés le nom du formulaire (dans l'exemple formulaire) et le nom du champ de saisie (dans l'exemple saisie). La fonction proprement-dite se divise en trois parties qui utilisent certaines tecniques d'insertion du formatage selon le type de navigateur. D'abord, c'est l'objet document.selection , soutenu seulement par l'Explorer Internet, qui est interrogé. Au cas où il existe, le code de formatage est inséré avec son aide et la position du curseur est ajustée. Au cas où document.selection n'est pas disponible, il est vérifié dans l'embranchement suivant si le navigateur soutient la propriété selectionStart. C'est le cas pour les navigateurs utilisant un modèle Gecko récent (par exemple Netscape à partir de la version 7, Mozilla et Firefox).
Pour le cas où ni document.selection ni selectionStart sont connus, le dernier embranchement contient le code pour tous les autres navigateurs (en particulier Opera). Pour ces navigateurs, il n'existe aucune possibilité de lire le texte sélectionné ou la position du curseur dans un champ de saisie. La position d'insertion ainsi que le texte à formater doivent ainsi être interrogés à l'aide de window.prompt().
Le code ci-dessus a été testé avec succès avec l'Explorer Internet 5.0 et suivantes, Mozilla 1.0.1 et suivantes ainsi qu'avec Opera version 5.12 et suivantes. Mozilla soutient selectionStart et donc l'insertion automatique où se trouve le curseur à partir de la version 1.1 Beta.
La mise en œuvre de ce script est universelle. Les seuls paramètres nécessaires sont le code qui doit être inséré avant le passage sélectionné et le code qui doit être inséré après le passage sélectionné. Le code à insérer peut également être constitué d'un élément HTML. Vous pouvez appeler la fonction insertion avec par exemple insertion('<strong>', '<\/strong>'), pour insérer un élément strong, qui met le texte en valeur. Il est possible de la même façon d'insérer du code en une seule partie comme par exemple des caractères spéciaux ou des émoticônes. Transmettez dans ce cas à la fonction, une simple chaîne vide comme deuxième paramètre, par exemple insertion(' :-) ', '').
Par la méthode range.move() avec l'Explorer Internet ou bien selectionStart et selectionEnd avec les navigateurs du modèle Gecko, la position du curseur est ajustée après l'insertion et le texte est déselectionné le cas échéant. Si du texte avait été sélectionné et incorporé dans le code de formatage, le curseur est alors placé après le repère de fin. Si aucun texte n'a été sélectionné et qu'un code de formatage vide a été inséré, le curseur est placé entre le repère d'ouverture et le repère de fermeture. Vous pouvez empêcher ces corrections en retirant les parties correspondantes de la fonction. Naturellement vous pouvez également adapter celle-ci à vos besoins.
Il est possible que la question sur la position d'insertion par la fenêtre de dialogue prompt() dans la troisième partie de la fonction trouble l'utilisateur. Au lieu de cela, vous pouvez insérer automatiquement le code de formatage à la fin du texte saisi. Pour ce faire, remplacez les lignes de requête de pos tout simplement par la commande var pos = input.value.length;.
À l'aide d'une expression régulière, il est vérifié si la position d'insertion mentionnée est bien un nombre. L'expression régulière a été créée sous une formulation longue plutôt inhabituelle new RegExp('^[0-9]{0,3}$'), de façon à ce que même le navigateur Opera 5.x comprenne le code. Cette formulation équivaut à l'abrégée /^[0-9]{0,3}$/.
| |
Les adresses suivantes sont recommandées pour une meilleure compréhension de l'exemple ci-dessus, ou pour apprendre d'autres possibilités et détails.
Accès JavaScript aux éléments de formulaire
Expressions régulières en JavaScript
La méthode substr pour les objets String
MSDN: L'objet selection
MSDN: L'objet TextRange
Soutien JavaScript chez Opera 7
Référence DOM Gecko
|
| SELFHTML actuel Articles spécialisés JavaScript |
