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
WBOYasal
2016-05-16 15:47:111727semak imbas

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>

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>

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>

Rendering:

Selepas mengklik kotak teks

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

Kenyataan:
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