>웹 프론트엔드 >JS 튜토리얼 >js에서 클릭 라벨 텍스트를 얻는 방법과 텍스트는 텍스트 box_javascript 기술에 나타납니다.

js에서 클릭 라벨 텍스트를 얻는 방법과 텍스트는 텍스트 box_javascript 기술에 나타납니다.

WBOY
WBOY원래의
2016-05-16 15:47:111727검색

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>

렌더링:

텍스트 상자 클릭 후

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.