input文本框交换事件

原创 2016年08月31日 16:07:48

做前端的demo做到文本框交换的事件,车站查询,类似于携程旅游的网站上,只是目前还没有完全解决,只是实现了简单的点击事件触发文本框的互相交换事件,很简单。代码如下:

    

<div class="about_top">
	当前位置: 对外交通>航班动态信息查询
</div>
<!-- about_form -->
<div class="about_form">
	<form action="">
		<span>航线查询: </span>
		<input type="text" class="input_text" value="盐城" id="text1" />
		<a href="javascript:;" class="change"><em><!-- 方向图标 --></em></a>
		<input type="text" class="input_text" value="南京" id="text2"  style="margin-left: 45px;"/>
		<span>查询日期: </span><input type="text"  class="textymdhms1"/>
		<div class="rili"></div>
		<input type="button" class="about_but" value="查询" id="" />
	</form>
</div>

javascript代码:

<script>
var num1 = document.getElementById("text1").value;
var num2 = document.getElementById("text2").value;
var i = 1;
$(function(){
	$(".change").click(function(){
		if(i == 1){
		document.getElementById("text1").value = num2;
		document.getElementById("text2").value = num1;
		i = 2;
		}else if(i == 2){
			document.getElementById("text1").value = num1;
			document.getElementById("text2").value = num2;
			i = 1;
		}
		
	})
});
</script>	






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

input输入框和textarea文本框的value改变事件

如果写过检测input或者textarea输入框文本检测的人一定知道onchange或者jq的change方法检测文本变化是检测不到的,因为该事件是在文本框获得焦点,并且改变其中的内容之后再失去焦点才...

input输入框的各种样式 文本框为下划线 text输入框样式

http://blog.sina.com.cn/s/blog_6e212cad0100mi11.html 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: ...

input文本框、文字、按钮、图片 垂直居中对齐的解决办法

1.input 文本框 文字垂直居中对齐 表单默认input文本框文字并不垂直居中而在顶端,如何调整呢,可以通过css来调整垂直高度,代码演示如下 input type...
  • familyGo
  • familyGo
  • 2011年07月27日 09:38
  • 13820

jquery/js实现文本框根据输入内容input,textarea自适应高度

//默认的参数$(".chackTextarea-area").autoTextarea({maxHeight:220,minHeight:$(this).height()})

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

Native嵌套H5的那些事儿 列表内容 (1)native 的虚拟键盘弹出input 文本框上提及其置顶显示 解决方案1: 在各个的input输入框用标签包起来 例如: 解...

jquery 动态添加、按顺序添加input文本框并且实现删除操作

1.先来一张图来告诉我们今天要实现什么 蓝色加号按钮点击就会动态添加一行“发明人N姓名”和“发明人N排名” 的input文本框还有图片”“  点击蓝色按钮减号就会减少相对应的那一行还有索引也会减掉...

Form表单之input文本框操作

input文本框操作: Form表单文本框操作示例1 label{display:inline-block;width:7em;margin-left:0.3em;marg...

jQuery表单Input文本框默认说明文字获得焦点后消失效果

法一: 加入以下jQuery代码 var txt=[];   var textbox=$('input:text');   textbox.each(f...

深入浅出INPUT文本框

首先说明下本次测试的浏览器版本: IETester v0.4.12 IE6-IE8 IE9.08112.16421 Chrome 21.0.1180.83 m Firefox 16.0.1 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:input文本框交换事件
举报原因:
原因补充:

(最多只允许输入30个字)