L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
105375 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques
     Création logo

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     Activeartanima...
     Le village de ...
     L'écriteau
     Faro-dessing
     Gifs animés, f...
     Netsources
     Easy-script.com
     K i s s design
     Trucs et astuc...
     Je javascript
     Les autres
     Votre site ici ?


Article posté par : deoxys
Date de mise en ligne : 15-03-2006
Niveau : Assez facile
>> Ajouter un article

Tansformer un champ de texte en un texte




De quoi ?

Beaucoup de personnes utilisent des input type text/textarea pour utiliser des scripts javascripts, y mettre des textes
défilants, y mettre l'heure... Cependant parfois on voudrait supprimer ce cadre type formulaire sans devoir refaire le
script.
C'est extrêmement simple en utilisant CSS !

Exemple

Nous prenons une page à laquelle nous mettons une couleur de fond spécifique. Nous y mettons un input simple.
Voici le résultat obtenu.

Code :

<input type="text" size="20" value="Sans style">


A l'affichage, on obtient un banal champ de texte au fond blanc et avec une bordure spéciale. Exemple :


Maintenant, on utilise deux coups de CSS.

Code :
<input type="text" size="80" value="Avec style" style="border-width : 0px; background-color: transparent;">


On a mis la largeur de la bordure à zéro, on a mis transparent en couleur de fond.
Le résultat est un texte normal. Résultat :


Remarque 1 : Cela s'applique aussi aux textarea !


Remarque 2 : Il s'agit toujours d'un champ de formulaire, cependant il n'y a plus que le texte. Le visiteur peut toujours séléctionner ce texte et le supprimer.



Annotations des visiteurs :

De fredo les bons tuyaux - le 27-05-2006

Pour la remarque 2, il suffit d'inserer readonly dans la balise <input et le tour est joué... :-)
De deoxys - le 05-05-2006

Note : Ne fonctionne pas sous Safari pour l'instant, qui ne gère quasiment pas les CSS sur les input. Cela devrait bientôt changer, avec la prochaine version.

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces





12 visiteurs
actuellement en ligne

    PUBLICITE

Wilogo.com - Création Logo Entreprise

     ANNUAIRE WEBMAST.
Noos
Opérateur cablé vraiment bon pour la TV, peut-etre un peu moins pour le net. Des bonnes offres cependant.
http://www.noos.fr/
Cat : Haut débit
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
55832 membres
8722 comptes CountUs
1518 comptes myCircle

     LES FORUMS :
14 forums
39348 topics
189197 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Referencement" du jour par ganou66
Pour bien commencer un référencement, votre script doit comporter des ' meta tag ' adéquats.
http://www.objectif-referencement.com/comprendre.php est la pour vous aider.
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 04/12/2008 02:10:08 | Design by Studcrea | Gen. en 0.44 sec.