文本框事件——单击 隐藏与显示

来源:互联网 发布:滨州行知中学 编辑:程序博客网 时间:2024/05/21 01:27

这篇小博文描述了再做input文本框输入的时候,选择不同的按钮,文本框出现与否不同。
这里面使用了一小段JavaScript代码,很简单,很实用。

<html><body>       <tr>          <td align="left">是否有地域</td>          <td align="left">        <input type="radio"  style="width: 80px" name="tb_region" value="y" id="test1"><input type="radio"  style="width: 80px" name="tb_region" value="n" id="test2"></td>          <td style="width:500px">        <input type="text" id="spa" name="spa" value="请输入地域" style="size:10px; display:none" class="gray" onclick="if(this.value=='请输入地域'){this.value='';this.className='black'}" onblur="if(this.value=='') {this.value='请输入地域';this.className='gray'}" /></td></tr>       <tr>          <td align="left">是否有时间</td>          <td align="left">          <input type="radio" style="width: 80px" name="tb_shijian" value="y" id="test3"><input type="radio" style="width: 80px" name="tb_shijian" value="n" id="test4"></td>            <td style="width:500px">          <input type="text" id="spa1" name="spa1" value="请输入时间" style="size:10px; display:none" class="gray" onclick="if(this.value=='请输入时间'){this.value='';this.className='black'}" onblur="if(this.value=='') {this.value='请输入时间';this.className='gray'}" />          <!--<span style="color:#C0C0C0;size: 10px">●请选择是否有时间</span></td>-->       </tr><script type="text/javascript">  document.getElementById("test1").onclick=function(){    document.getElementById("spa").style.display="none";  }    document.getElementById("test2").onclick=function(){    document.getElementById("spa").style.display="block";  }    document.getElementById("test3").onclick=function(){    document.getElementById("spa1").style.display="none";  }    document.getElementById("test4").onclick=function(){    document.getElementById("spa1").style.display="block";  }</script></html>
0 0
原创粉丝点击