Heim >Web-Frontend >js-Tutorial >So erreichen Sie, dass in js Text auf Beschriftungen klickt und der Text im Textfeld angezeigt wird_Javascript-Kenntnisse
js implementiert Click-Label-Text und der Text wird im Textfeld angezeigt. Im Allgemeinen ist Methode eins leistungsfähiger.
Die erste Methode: Klicken Sie nach Belieben auf ein beliebiges Etikett und es erscheint im Textfeld. Wenn Sie ein zweites Mal auf das Etikett klicken, verschwindet der entsprechende Text im Textfeld.
<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>
Rendering:
Zweite Methode: Wenn Sie auf die Beschriftung „Script Home“ klicken, erscheint diese Beschriftung im Textfeld. Nachdem Sie auf die Beschriftung „SQL“ geklickt haben, wird die Beschriftung „Script Home“ im angezeigt Textfeld.
<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>
Rendering:
Hier möchte ich Ihnen einen weiteren Javascript-Tipp geben -----JS ermöglicht es Ihnen, auf das Textfeld zu klicken, um den Standardtext im Formular zu löschen. Manchmal, wenn Sie das Formular ausfüllen Inhalt, einige Standardtexte werden im Formular angezeigt. Wir möchten den Eingabeaufforderungstext nicht einzeln löschen. Gibt es eine Möglichkeit, ihn schnell zu löschen? Unten ist der kleine Code, den ich für alle vorbereitet habe:
<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>
Rendering:
Nachdem Sie auf das Textfeld geklickt haben
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.