JS how to achieve click on the label text, text in the text box appears _javascript skills

JS Implementation Click on the label text, text appears in the text box, the following 2 methods to achieve a slightly different function, the overall method a more powerful function.

The first way: Random Click any label will appear in the text box, how to click the second tab, 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" > City level,</div>< Div class= "C" id= "C1" > Provincial, </div><div class= "C" id= "C2" > National
<script>
var x=["city Level", "Provincial", " National "];
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>

Effect Chart:

The second way: When you click on the "Cloud Communities" tab, this label appears in the text box, and then click on the SQL tag, the "SQL" tag will replace the "Cloud Community" tab appears in the text box.

<style>.label {cursor:pointer}</style>

<input type= "text" id= "textbox" size = "a" name= "CHAXINMD" />
<span class= "label" >JS special effects </span>
<span class= "label" >C++</span>
< Span class= "label" >SQL</span>
<span class= "label" > cloud-dwelling Community </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>

Effect Chart:

Here again for you to share another JavaScript tricks-----JS Implementation Click the text box to clear the default text inside the form, sometimes when you fill out the form content, the form will appear some default hint text, we do not want to delete one after another, Is there any way to achieve quick removal? Here's the little code I've prepared for you:

<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= "Please enter the keyword" >

<input type= "Submit" name= "submit" value= "Submit" onfocus= "if (so_box.so_name.value==so_ Box.so_name.defaultValue) {so_box.so_name.value= ';} ' >

</form>

Effect Chart:

After clicking the text box

The above is the entire content of this article, I hope to help you learn.