Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie, dass in js Text auf Beschriftungen klickt und der Text im Textfeld angezeigt wird_Javascript-Kenntnisse

So erreichen Sie, dass in js Text auf Beschriftungen klickt und der Text im Textfeld angezeigt wird_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:47:111705Durchsuche

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn