Maison >interface Web >js tutoriel >Comment obtenir le texte de l'étiquette de clic en js et le texte apparaîtra dans les compétences text box_javascript

Comment obtenir le texte de l'étiquette de clic en js et le texte apparaîtra dans les compétences text box_javascript

WBOY
WBOYoriginal
2016-05-16 15:47:111736parcourir

js implémente le texte de l'étiquette de clic et le texte apparaît dans la zone de texte. Les deux méthodes suivantes ont des fonctions légèrement différentes. De manière générale, la première méthode est plus puissante.

La première méthode : cliquez sur n'importe quelle étiquette à volonté et elle apparaîtra dans la zone de texte. Si vous cliquez sur l'étiquette une deuxième fois, le texte correspondant disparaîtra dans la zone de texte.

<style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style>
<input id="i" type="text" ><div class="c" id="c0">市级,</div><div class="c" id="c1">省级,</div><div class="c" id="c2">国家级
<script>
var x=["市级","省级","国家级"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){$("c"+i).onclick=(function(i){return function(){
var s=y.join(",").indexOf(x[i]);if(s>=0){
for(var r in y){if(y[r]==x[i]){y.splice(r,1)}}}
else{y.push(x[i])}$("i").value=y.join(" ");}})(i)}
</script>

Rendu :

Deuxième méthode : Lorsque vous cliquez sur l'étiquette "Script Home", cette étiquette apparaîtra dans la zone de texte. Après avoir cliqué sur l'étiquette SQL, l'étiquette "SQL" remplacera l'étiquette "Script Home" qui apparaît dans la zone de texte. zone de texte.

<style>.label {cursor:pointer}</style>

<input type="text" id="textbox" size = "30" name="chaxinmd" />
<span class="label">JS特效</span>
<span class="label">C++</span>
<span class="label">SQL</span>
<span class="label">脚本之家</span>
<script type="text/javascript">
spans=document.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{if(spans[i].className=="label")
{  spans[i].onclick=function()
{    document.getElementById('textbox').value=this.innerHTML; 
 }}}
 </script>

Rendu :

Ici, j'aimerais partager avec vous une autre astuce Javascript -----JS vous permet de cliquer sur la zone de texte pour effacer le texte par défaut à l'intérieur du formulaire Parfois lorsque vous remplissez le formulaire. contenu, du texte par défaut apparaîtra dans le formulaire. Nous ne voulons pas supprimer le texte d'invite un par un. Existe-t-il un moyen de l'effacer rapidement ? Ci-dessous le petit code que j'ai préparé pour tout le monde :

<form action="" method="get" name="so_box" id="so_box">

<input name="so_name" type="text" id="so_name" onFocus="if(value==defaultValue){value='';}"
onBlur="if(!value){value=defaultValue;}"
value="请输入的关键词">

<input type="submit" name="Submit" value="提交" onFocus="if(so_box.so_name.value==so_box.so_name.defaultValue){so_box.so_name.value='';}">

</form>

Rendu :

Après avoir cliqué sur la zone de texte

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn