Champs texte: Ajout de valeur au click sur bouton

Eléphanteau du PHP | 33 Messages

17 juin 2012, 15:26

Bonjour,
Je souhaiterai faire comme sur les forums, celui-ci en exemple, où lors du post du message, en cliquant sur un bouton, par exemple "B", dans le champs message viens s'ajouter "[ b ][ / b ]".

Je sais que ceci utilise la technologie JAVA, cependant, plus moyen de remettre la main sur le code qui permet de faire celà.

Mon cas :

Au click sur le bouton "GRAS" (Id = Gras), dans le champs texte (id = Visitor_message), a la suite de mon texte, viens s'ajouter "<b></b>". Si possible, le curseur viendra se positionner entre "<b>" et "</b>".

Merci par avance de votre aide,
Fab.

Mammouth du PHP | 661 Messages

17 juin 2012, 16:05

salut ::

1. donc, ce n'est pas du java mais du javaScript !...
2. cherche du coté de text selectionné javascript ou créer un wysiwyg, tu devrais trouver facilement ;)

@++

Petit nouveau ! | 9 Messages

17 juin 2012, 16:31

Voilà un petite fonction que j'ai préparé, ça vaut ce que ça vaut. Il y a juste un hic, apparemment, il n'est pas possible de focus à un endroit précis dans un champs =/
Et tu as la possibilité de rajouter des balises genre i, u, a, ...
        <button id="gras" onclick="balise('bold');">Gras</button>
        <button id="italic" onclick="balise('italic');">Italique</button>
        <form method="post" action="#">
            <textarea id="Visitor_message"></textarea>
            <input type="submit">
        </form>
[javascript]
function balise(bal) {
switch (bal) {
case 'bold':
var balisePrev = '<b>';
var balisePost = '</b>';
break;
case 'italic':
var balisePrev = '<i>';
var balisePost = '</i>';
break;
case 'underline':
var balisePrev = '<u>';
var balisePost = '</u>';
break;
case 'link':
var balisePrev = '<a href="">';
var balisePost = '</a>';
break;
default:
var balisePrev = '[error]';
var balisePost = '[/error]';
}
var textbox = document.getElementById('Visitor_message');
textbox.focus();
var txt = balisePrev + window.getSelection() + balisePost;
if(textbox.selectionStart != undefined) {
textbox.value = textbox.value.substring(0, textbox.selectionStart) + txt + textbox.value.substring(textbox.selectionEnd, textbox.value.length);
}
}
[/javascript]

Eléphanteau du PHP | 33 Messages

17 juin 2012, 17:34

Bonjour,

Tout d’abord, merci a Kelgors pour l'aide, cependant ça ne fonctionne pas dans mon cas, et je ne comprends pas pourquoi :(.
En fin de compte, au click sur le bouton, la balise voulue se met bien dans mon champs, cependant il poste le formulaire... Voici une ébauche de mon code :

Code : Tout sélectionner

<form id="form1" name="form1" method="post" action="?id=hours_modify_valid"> <div align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30"><div align="center"> <label></label> <label></label> <button id="Gras" onclick="balise('bold');">Gras</button> <button id="Italic" onclick="balise('italic');">Italique</button> <button id="Soulign&eacute;" onclick="balise('souligne');">Soulign&eacute;</button> <select name="Couleur" id="Couleur"> <option value="black">-- Couleur --</option> <option value="red">Rouge</option> <option value="orange">Orange</option> <option value="yellow">Jaune</option> <option value="green">Vert</option> <option value="blue">Bleu</option> <option value="purple">Violet</option> <option value="pink">Rose</option> </select> </div></td> </tr> <tr> <td><textarea name="Visitor_message" cols="57" rows="5" id="Visitor_message"><?php echo $Visitor_message; ?></textarea></td> </tr> </table> <p> <label></label> <label></label> </p> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20"><input name="button" type="submit" onclick="#" value="Valider les modifications" /></td> <td width="10">&nbsp;</td> <td width="54"><div align="center"> <input name="button2" type="button" onclick="history.go(-1)" value="Retour &agrave; l'administration" /> </div></td> </tr> </table> </div> </form>
et le code JAVASCRIPT reste le même que vous m'avez proposé.

Merci par avance,
Fab.
Modifié en dernier par StudsMaster le 17 juin 2012, 18:07, modifié 1 fois.

Petit nouveau ! | 9 Messages

17 juin 2012, 17:51

Et bien écoute, moi cela marche très bien... =(
A ce moment là, essaie sur Form et regarde le code source.

Si tu as juste repris le fichier JavaScript, n'oublie pas d'ajouter les fonctions dans tes boutons dans la balise onclick="balise('bold');" ou onclick="balise('italic');", ...

EDIT:
Et finalement, pourquoi s'embêter ? On peut trouver un script tout fait sur le SiteDuZero =)

Eléphanteau du PHP | 33 Messages

17 juin 2012, 18:16

PS: Idem avec celui du site du ZERO, ca ne veut pas fonctionner :(

EDIT: C'est bon, ca fonctionne enfin, j'ai rien compris au pourquoi ca fonctionnait pas avant mdr.

Merci :)

Le même type de script pour les couleurs est réalisable je pense, a partir d'une liste de couleur ?

Petit nouveau ! | 9 Messages

17 juin 2012, 19:08

Oui, c'est possible, et tu peux garder le meme script.
Etant donné que tes balises sont html, il vaut mieux leur attribuer une classe et faire le boulot en css.
genre
<span class="red"></span>
et dans ton css:
.red {color: red;}
Cela reste un peu fastideux mais cela reste simple.
Après tout dépend de quelle manière tu veux le faire.
------
Je n'avais pas vu ton post avec ton code HTML.
C'était à cause de tes <button></button> dans le <form></form>.
Il faut les mettres en dehors.

Eléphanteau du PHP | 33 Messages

17 juin 2012, 19:44

Malheureusement le formulaire est dédié a des personnes sans conaissance du HTML et CSS.
Il faudrait en fin de compte qu'au clic sur le menu, choix d'une couleur, le code "<font color=$color></font>" aparaisse. Avec "$color" étant la valeur de la liste (red, green, blue, orange, ... - Les couleurs principales uniquement).

Merci,
Fab.

Petit nouveau ! | 9 Messages

17 juin 2012, 19:52

Ah oui, bien entendu.
Les personnes auront juste à cliqué sur une couleur et dans la zone de texte est inséré : '<span class="red"></span>

Après, tu prépares de ton coté un css avec toutes les couleurs que tu veux incorporer (red, blue, green, yellow, silver, ...)

L'utilisateur insérera uniquement via le bouton un <span> (pas plus compliqué que <i> ou <b>.
Je te dis ça parce que <font> ne se fait plus trop, il est devenu obsolète.

Après, à toi de voir. Ce ne sont que des conseils. =D

Eléphanteau du PHP | 33 Messages

18 juin 2012, 16:58

Bonjour,
Finalement j'ai fait tout simple :

J'ai créé une image sur laquelle j'ai fait des carés de couleur. Et via les balises <map> j'ai sélectionné des actions JAVA sur chaque couleur.

Ca fonctionne impec :)

EDIT: PS => Merci pour l'aide :D