js는 클릭 라벨 텍스트를 구현하고 텍스트 상자에 텍스트가 표시됩니다. 다음 두 가지 방법은 약간 다른 기능을 가지고 있습니다. 일반적으로 방법 1이 더 강력합니다.
첫 번째 방법: 원하는 라벨을 클릭하면 텍스트 상자에 표시됩니다. 두 번째로 라벨을 클릭하면 해당 텍스트가 텍스트 상자에서 사라집니다.
<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>
렌더링:
두 번째 방법: "Script Home" 레이블을 클릭하면 이 레이블이 텍스트 상자에 나타납니다. SQL 레이블을 클릭하면 "SQL" 레이블이 "Script Home" 레이블을 대체합니다. 텍스트 상자.
<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>
렌더링:
여기서 또 다른 Javascript 팁을 공유하고 싶습니다. -----JS를 사용하면 양식을 작성할 때 텍스트 상자를 클릭하여 양식 내부의 기본 텍스트를 지울 수 있습니다. 가끔 양식을 작성할 때. 내용이 있으면 일부 기본 텍스트가 양식에 표시됩니다. 프롬프트 텍스트를 하나씩 삭제하고 싶지 않습니다. 빠르게 지울 수 있는 방법이 있나요? 아래는 제가 여러분을 위해 준비한 작은 코드입니다:
<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>
렌더링:
텍스트 상자 클릭 후
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.