Rumah > hujung hadapan web > tutorial js > Bagaimana untuk mencapai teks label klik dalam js dan teks akan muncul dalam kotak teks kemahiran javascript

Bagaimana untuk mencapai teks label klik dalam js dan teks akan muncul dalam kotak teks kemahiran javascript

WBOY
Lepaskan: 2016-05-16 15:47:11
asal
1726 orang telah melayarinya

js melaksanakan teks label klik, dan teks muncul dalam kotak teks Kedua-dua kaedah berikut mempunyai fungsi yang berbeza secara umumnya, kaedah satu lebih berkuasa.

Kaedah pertama: Klik pada mana-mana label sesuka hati dan ia akan muncul dalam kotak teks Jika anda mengklik pada label untuk kali kedua, teks yang sepadan akan hilang dalam kotak teks.

<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>
Salin selepas log masuk

Rendering:

Kaedah kedua: Apabila anda mengklik label "Rumah Skrip", label ini akan muncul dalam kotak teks Selepas mengklik label SQL, label "SQL" akan menggantikan label "Rumah Skrip" ” muncul dalam kotak teks.

<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>
Salin selepas log masuk

Rendering:

Di sini saya ingin berkongsi dengan anda satu lagi petua Javascript -----JS membolehkan anda mengklik pada kotak teks untuk mengosongkan teks lalai dalam borang Kadang-kadang apabila anda mengisi borang kandungan, beberapa teks lalai akan muncul dalam borang Kami tidak mahu memadamkan teks gesaan satu demi satu. Adakah terdapat cara untuk mengosongkannya dengan cepat? Di bawah ialah kod kecil yang saya sediakan untuk semua orang:

<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>
Salin selepas log masuk

Rendering:

Selepas mengklik kotak teks

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan