html5文本框内容互换代码



199 793 265



特效描述:html5 文本框内容互换,html5文本框内容互换代码

代码结构

1. HTML代码

<script type="text/javascript">
 function change(){
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
{
   document.getElementById("num2").value = num1;
   document.getElementById("num1").value = num2;
  }
 }
</script>
<style type="text/css">
	body{ font-family: "Microsoft YaHei";font-size: 14px;line-height: 28px;}
	input {
    width: 217px;
    height: 28px;
    padding-left: 6px;
    border-color: #BBB #DDD #DDD #BBB;
    box-shadow: 1px 1px 1px #DDD inset;
    line-height: 28px;
    padding: 0 5px;
    border: 1px solid #ccc;
    font-size: 12px;
    outline: medium none; font-size: 12px;
    outline: none;
}
	.huan{ border-radius: 15px; width: 28px; height: 28px; background: url(images/h.png);  border: 1px solid #ccc; box-shadow: 0px 0px 0px #fff inset;}
		.huan:hover{  box-shadow: 1px 1px 1px #DDD inset;}
</style>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
   <tbody>
     <tr>
       <td align="center">出发城市</td>
       <td align="center"><input type="text" name="num1" id="num1" value="西安(SIA)"></td>
       <td align="center"><input type="button" onClick="change()"  class="huan" value=""></td>
       <td align="center">到达城市</td>
       <td align="center"><input type="text" name="num2" id="num2" value="北京(BJS)"></td>
     </tr>
  </tbody>
</table>
<p  style="text-align: center">点击中间的切换按钮,城市内容互换</p>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 文字切换 文字选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到