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

最新推荐文章于 2023-10-22 23:01:28 发布

两两翅膀

最新推荐文章于 2023-10-22 23:01:28 发布

阅读量1.7k

点赞数

分类专栏： WEB学习篇文章标签： javascript HTML 文本框显示事件

本文链接：https://blog.csdn.net/qq_29918079/article/details/53544150

版权

WEB学习篇专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇小博文描述了再做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

收藏

觉得还不错? 一键收藏
0
评论
文本框事件——单击隐藏与显示

这篇小博文描述了再做input文本框输入的时候，选择不同的按钮，文本框出现与否不同。这里面使用了一小段JavaScript代码，很简单，很实用。<html><body> <tr> <td align="left">是否有地域</td> <td align="left"> <input type="radio" style="
复制链接

扫一扫