FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 41, nombre de questions : 174, dernière mise à jour : 30 avril 2013
Sommaire→Les autres objets- Comment sélectionner la valeur d'un champ texte ?
- Comment activer/désactiver un objet formulaire ?
- Comment donner le focus à un objet ?
- Comment modifier le texte d'un bouton input type file ?
- Comment utiliser une variable JavaScript dans un champ texte ?
- Comment modifier un événement d'un objet ?
- Comment créer un graphique avec des courbes ?
- Comment afficher la liste des balises d'un document, dans l'ordre?
- Comment rendre son document non sélectionnable ?
- Comment remplacer l'attribut target pour les balises <a> en XHTML ?
Ce code peut être utilisé par exemple lors de l'échec de la validation d'un champ de formulaire.
document.getElementById('monchamp').select();
En utilisant :
disabled = true
ou :
disabled = false
Exemple :
Checkbox qui active/désactive un champs texte.
Entre les balises <head></head> :
function actdesact()
{
if (document.formulaire.check_box.checked)
document.formulaire.zone_texte.disabled=true;
else
document.formulaire.zone_texte.disabled=false;
}
et la checkbox :
En JavaScript, tous les objets ont une méthode permettant de leur donner le focus :
document.getElementById('id_objet').focus();
Pour changer le texte d'un bouton de type file, on est obligé de "ruser" car il
n'y a pas d'autre moyen.
Voici le script :
<script type="text/javascript">
function getfile(){
document.getElementById('hiddenfile').click();
document.getElementById('selectedfile').value=document.getElementById('hiddenfile').value
}
</script>
Et le corps de votre page :
<body>
<input type="file" id="hiddenfile" style="display:none" />
<input type="text" id="selectedfile" />
<input type="button" value="Select a file" onclick="getfile()" />
</body>
En fait, ce que l'on aperçoit sur la page ressemble à un champ de type file, mais en réalité, il s'agit d'un bouton et d'un champ de type texte. Ainsi, grâce à la fonction getfile(), on simule le clic sur le champ File que l'on a caché...
<script type="text/javascript">
lavariable = "MaValeur";
document.write ('<input type="text" name="champ" value="' + lavariable + '">');
</script>
Dans cet exemple, le champ qui apparaitra aura comme valeur par défaut la valeur de la variable lavariable, c'est-à-dire : MaValeur.
Ce code permet de modifier ou d'ajouter un événement à un objet.
Par exemple un bouton ou un lien.
Pour cela, il suffit de donner un id à l'objet concerné et d'exécuter ce code.
Ainsi, l'événement peut être assigné dynamiquement.
document.getElementById('id_objet').onclick= function(){alert("blabla")};
Avec ce code, on peut également modifier la valeur des propriétés propres
à l'objet en question. On peut par exemple modifier la propriété width,
height, ...
<html>
<head>
<script type="text/javascript">
function courbe()
{var x, y, maxtop, maxleft, graph="";
var pixel = new Image();
pixel.src="pixel.gif";
maxtop = 150;
maxleft = 80;
for (x=-10; x<=10; x++)
{
y = x*x ;
graph += "<img src='" + pixel.src + "' style='position:relative;top:" +
(maxtop-y) + ";left=" + (maxleft+x) + "'>" ;
}
document.getElementById("legraph").innerHTML=graph;
}
</script>
</head>
<body onload="courbe()">
<div id="legraph"
style="background-color:#dddddd;width:200px;height:200px;top:100px;left:100px;position:absolute;border:1px solid black">
</div>
</body>
</html>
Pour que ce code fonctionne correctement, il faut au préalable créer une image (pixel.gif) de 1px sur 1px
<script type="text/javascript">
function go(b){
var d="";
b=b.getElementsByTagName('*');
for(i=0;i!=b.length;i++){
d+=b[i].nodeName+'\n';
}
alert(d)
}
</script>
Ce script parcours toutes les balises contenues à l'intérieur de la balise passée en paramètre. Il ne reste plus qu'à récupérer ces balises grâce à la fonction getElementsByTagName
Ce petit script permet de rendre un document non sélectionnable:
function no(){return false;}
document.onmousedown=no;
if(typeof document.onselectstart!="undefined"){
document.onselectstart=no;
}
Ce script permet de reproduire la comportement de l'attribut unselectable d'Internet Explorer.
Voici le code à mettre afin de remplacer l'attribut target pour les balises <a> en XHTML 1.0 Strict et XHTML 1.1. Le remplacement dépend de la valeur :
Si c'est _blank :
onclick="window.open(this.href); return false;"
Si c'est _self :
onclick="self.location.assign(this.href); return false;"
Si c'est _parent :
onclick="self.parent.location.assign(this.href); return false;"
Si c'est _top :
onclick="top.location.assign(this.href); return false;"
Si c'est nom_de_la_frame :
onclick="window.frames['nom_de_la_frame'].src=this.href; return false;"
petite précision : normalement, seul le cas de _blank peut être utilisé en XHTML Strict car les (i)frame ne sont pas valides et _self est la valeur par défaut.