How to achieve click label text in js and the text will appear in the text box_javascript skills

js implements click label text, and the text appears in the text box. The following two methods have slightly different functions. Generally speaking, method one is more powerful.

The first method: Click on any label at will and it will appear in the text box. If you click on the label for the second time, the corresponding text will disappear in the text box.

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

Second method: When you click the "Script Home" label, this label will appear in the text box. After clicking the SQL label, the "SQL" label will replace "Script Home" ” label appears in the text box.

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

Here I would like to share with you another Javascript tip -----JS enables you to click on the text box to clear the default text inside the form. Sometimes when you fill in the form content, some default text will appear in the form. We don’t want to delete the prompt text one by one. Is there any way to quickly clear it? Below is the small code I prepared for everyone:

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

After clicking the text box

The above is the entire content of this article, I hope it will be helpful to everyone’s study.