jquery处理任意多个元素,判断任意个文本框的值是否被修改

最新推荐文章于 2022-07-14 19:14:02 发布
最新推荐文章于 2022-07-14 19:14:02 发布
阅读量403 收藏
点赞数
分类专栏： JavaScript 文章标签： jQuery JavaScript CSS 浏览器 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wq1030/article/details/83729742
版权

预想使用focus等事件，考虑到浏览器不支持的缘故，便使用了

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>委员基础信息维护</title>
		<!-- 加载easyui样式表 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
		<!-- 加载jquery -->
		<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
		<!-- 加载easyui -->
		<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
		<!-- 加载jquery-form -->
		<script type="text/javascript" src="plugins/jquery/jquery.form.js"></script>
		<!-- 加载自定义js -->
		<script type="text/javascript" src="javascript/sysmanage/personinfo.js"></script>
	</head>

	<body style="background: #c7dcf1;">
	
	
	<form id="upForm" method="POST" enctype="multipart/form-data"> 
	
	
		<table>
			<tr>
				<td>
					&nbsp;
					<input type="button" name="" id="" value="委员维护"
						οnclick="show_win()">
				</td>
			</tr>
		</table>
		<div id="win" style="background-color: #d1e1f0;" model="true">
			<br>
			<fieldset>
				<legend style="font-size: 14; font-weight: bold">
					委员基本信息
				</legend>
				<div style="float: left;">

<table width="1150"  border="0">
    <tr>
      <td width="155" >委员证号：</td>
      <td width="97" ><label>
        <input type="text" name="committeemannumber" id="committeemannumber" size="13"/>
      </label></td>
      <td width="94" >届次：</td>
      <td width="97"><label>
        <input type="text" name="sessions" id="sessions" size="13"/>
      </label></td>
      <td colspan="4">&nbsp;</td>
      <td colspan="2" rowspan="6">
      <div id="right" style="float: none; text-align: center;">
					<div style="width: 120px; height: 150px; background-color: #cccccc">
						<img id="userPhoto"/>
					</div>
					<br>
					<input type="button" id="" name="" value=" 上传 " οnclick="return show_upload();">
							&nbsp;
							<input type="button" value=" 修改 ">
					
					<div id="uploadWin" class="easyui-window" title="My Window" closed="true">
						<!--  <form id="upForm" method="POST" enctype="multipart/form-data">  
					        上传文件：<input type="file" name="file" id="theFile"/>  
					        <br/>  
					        <input type="submit" value="提交" οnclick="return upload();"/> 
					        <input type="button" value="取消" /> 
					        <div id="upMessage" style="displan:hidden"></div>  
					    </form>  -->
					    
					    
					    上传文件：<input type="file" name="file" id="theFile"/>  
					        <br/>  
					        <input type="submit" value="提交" οnclick="return upload();"/> 
					        <input type="button" value="取消" /> 
					        <div id="upMessage" style="displan:hidden"></div>
					    
					    
					    
					</div>
					
					
				</div>
      </td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td><label>
        <input type="text" name="name" id="name" size="13" />
      </label></td>
      <td>性别：</td>
      <td><label>
        <input type="text" name="sex" id="sex" size="13"/>
      </label></td>
      <td width="113">民族：</td>
      <td width="97"><label>
        <input type="text" name="nationality" id="nationality" size="13"/>
      </label></td>
      <td width="103">出生日期：</td>
      <td width="97"><label>
        <input type="text" name="birthday" id="birthday" size="13" class="easyui-datebox"/>
      </label></td>
    </tr>
    <tr>
      <td height="26">工作系统：</td>
      <td><label>
        <input type="text" name="worksystem" id="worksystem" size="13"/>
      </label></td>
      <td>所在地：</td>
      <td><label>
        <input type="text" name="locus" id="locus" size="13"/>
      </label></td>
      <td>保密电话：</td>
      <td><label>
        <input type="text" name="secrettelephone" id="secrettelephone" size="13"/>
      </label></td>
      <td>学历：</td>
      <td><label>
        <input type="text" name="degree" id="degree" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>单位名称：</td>
      <td colspan="3"><label>
        <input type="text" name="unit" id="unit" size="50"/>
      </label></td>
      <td>行政级别：</td>
      <td><label>
        <input type="text" name="rank" id="rank" size="13"/>
      </label></td>
      <td>单位电话：</td>
      <td><label>
        <input type="text" name="unittelephone" id="unittelephone" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>现任职务：</td>
      <td colspan="3"><label>
        <input type="text" name="post" id="post" size="50"/>
      </label></td>
      <td>社会兼职：</td>
      <td colspan="3"><label>
        <input type="text" name="sideline" id="sideline" size="50"/>
      </label></td>
    </tr>
    <tr>
      <td>单位地址：</td>
      <td colspan="3"><label>
        <input type="text" name="unitaddress" id="unitaddress" size="50"/>
      </label></td>
      <td>单位邮编：</td>
      <td><label>
        <input type="text" name="unit_number" id="unit_number" size="13"/>
      </label></td>
      <td>交换箱号：</td>
      <td><label>
        <input type="text" name="exchangeboxnumber" id="exchangeboxnumber" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>家庭地址：</td>
      <td colspan="3"><label>
        <input type="text" name="houseaddress" id="houseaddress" size="50"/>
      </label></td>
      <td>家庭邮编：</td>
      <td><label>
        <input type="text" name="housepostalcode" id="housepostalcode" size="13" />
      </label></td>
      <td>家庭电话：</td>
      <td><label>
        <input type="text" name="housetelephone" id="housetelephone" size="13"/>
      </label></td>
      <td width="142">手机号：</td>
      <td width="91"><label>
        <input type="text" name="mobiletelephone" id="mobiletelephone" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td height="31">电子邮箱：</td>
      <td colspan="3"><label>
        <input name="email" type="text" id="email" size="50"/>
      </label></td>
      <td>文件去向：</td>
      <td><label>
        <input type="text" name="docwhither" id="docwhither" size="13"/>
      </label></td>
      <td>职业专长：</td>
      <td><label>
        <input type="text" name="occupation" id="occupation" size="13"/>
      </label></td>
      <td>职称：</td>
      <td><label>
        <input type="text" name="professiontitle" id="professiontitle" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>参政日期：</td>
      <td><label>
        <input type="text" name="franchisedate" id="franchisedate" size="13" class="easyui-datebox"/>
      </label></td>
      <td>党派：</td>
      <td><label>
        <input type="text" name="party" id="party" size="13"/>
      </label></td>
      <td>小组：</td>
      <td><label>
        <input type="text" name="team" id="team" size="13"/>
      </label></td>
      <td>界别：</td>
      <td><label>
        <input type="text" name="sector" id="sector" size="13"/>
      </label></td>
      <td>政协职务：</td>
      <td><label>
        <input type="text" name="pccpost" id="pccpost" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>专委会及职务：</td>
      <td colspan="2"><label>
        <input type="text" name="committee" id="committee" size="28"/>
      </label></td>
      <td><label>
        <input type="text" name="committeepost" id="committeepost" size="13"/>
      </label></td>
      <td>当前状态：</td>
      <td colspan="3"><label>
        <input type="text" name="currentstatus" id="currentstatus" size="50"/>
      </label></td>
      <td>当前状态日期：</td>
      <td><label>
        <input type="text" name="currentstatusdate" id="currentstatusdate" size="13" class="easyui-datebox"/>
      </label></td>
    </tr>
    <tr>
      <td>司机姓名：</td>
      <td colspan="3"><label>
        <input type="text" name="driver_name" id="driver_name" size="50"/>
      </label></td>
      <td>司机电话：</td>
      <td colspan="3"><label>
        <input type="text" name="driver_telephone" id="driver_telephone" size="50"/>
      </label></td>
      <td>车牌：</td>
      <td><label>
        <input type="text" name="car_number" id="car_number" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>简介：</td>
      <td colspan="9"><label>
        <textarea name="resume" id="resume" cols="90" rows="5"></textarea>
      </label></td>
    </tr>
  </table>
			</fieldset>
			<br>
			<fieldset>
				<legend style="font-size: 14; font-weight: bold">
					委员用户信息
				</legend>
				<table>
					<tr>
						<td>
							<label>
								用户名：
							</label>
							<input type="text" name="username" id="username" size="32">
						</td>
						<td>
							<label>
								用户密码：
							</label>
							<input type="password" name="password" id="password" size="32">
						</td>
						<td>
							<label>
								用户密码确认：
							</label>
							<input type="password" name="confirmPassword" id="confirmPassword" size="32">
						</td>
					</tr>
				</table>
			</fieldset>
			<div style="clear: both; text-align: center;">
				<table>
					<tr>
						<td>
							<input type="submit" value="   确定   " οnclick="return submitInfo();">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" value="   取消   " οnclick="return close_win();">
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		</form>
		
		
	</body>
</html>

 

判断其中任意一个文本框的值是否被修改

//绑定事件
//为界面上的所有元素添加focusin和focusout事件，
//用于判断用户是否修改了该值
function bindEvent()
{
	var temp;
	$("#committeemannumber,#sessions,#name,#committeemannumber,#sessions,#username,#sex,#nationality,#birthday,#worksystem,#locus,#secrettelephone,#degree,#unit,#rank,#unittelephone,#post,#sideline,#unitaddress,#exchangeboxnumber,#houseaddress,#housepostalcode,#housetelephone,#mobiletelephone,#email,#docwhither,#occupation,#professiontitle,#franchisedate,#party,#team,#sector,#pccpost,#committee,#committeepost,#currentstatus,#currentstatusdate,#resume,#car_number,#driver_name,#driver_telephone,#unit_number").bind({
		focusin:function (){
				//取得当前元素的id
				//alert(this.id);
				//alert("获得焦点时的值是："+$(this).val());
				temp=$(this).val();
			},
		focusout:function (){
			//alert("失去焦点时的值是："+$(this).val());
			var lastValue=$(this).val();
			if(temp!=lastValue&&null!=lastValue&&""!=lastValue)
			{
				alert("值改变了！");
			}
			else
			{
				alert("没有变!");
			}
		}
	 });
}

 

当然需要

$(document).ready(function() {
       bindEvent();
});

 

wq1030
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 判断某页面上的数据是否改变过
世间的轮回总是悲喜难捉摸
08-28 4648
使用场合：当某个页面数据修改时，需要执行某些操作时   在页面的body加载事件（onload）中加上initFileds()就可以记录页面的初始数据在需要判断页面数据是否改变时调用checkModification()方法就可判断数据是否改变返回值为true就是已经改变返回值为false就是没有改变       // 页面编辑数据    var inputsData;    var textar
jquery 元素第二个_Web前端之jQuery
weixin_39628268的博客
11-09 580
1、jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。var jQuery的代码将在所有主流浏览器中运行完全相同，包括Internet Explorer 6！2、可以从http://www.jquery.com下载jQuery库的副本，或者从CDN（内容分发网络）（如BootCDN或百度CDN）中引入。 将使用...
jquery选择多个元素
每天进步一点点
09-02 860
sele1,sele2,seleN选择器 选我吧！我是red 选我吧！我是green 选我吧！我是blue $(".red,.green").html("hi,我们的样子很美哦!"); 多个元素中间用， I always like walking in the rain,so no one can sen me crying.
jquery针对文本框内容是否改变的一种实现
weixin_34150224的博客
06-06 88
2019独角兽企业重金招聘Python工程师标准>>> ...
jq常用的几个判断元素的方法
前端小狮的博客
11-08 1845
// 判断是否隐藏 显示 $("#div").is(":hidden"); $("#div").is(":visible") //判断元素是否有内容 $("#div").is(":empty"); //判断是否包含 某元素 $("#div").length &gt; 0 ; $("#div").find(&quot
jquery实现页面离开时检测当前页面是否被修改，修改则提示
qw_xingzhe的专栏
02-03 7035
代码如下： //检测表单是否已经修改过 $(window).bind('beforeunload',function(){ if( IsModified() ){ return '您输入的内容尚未保存，确定离开此页面吗？'; } }); //检测页面表单是否已编辑过 function IsModified() { var result = false;
JQuery 文本框回车跳到下一个文本框示例代码
10-26
1. `loginInputForm.find('input')`：这部分是jQuery的选择器，`loginInputForm`是一个ID或者类名，用于标识包含文本框的表单元素。`find('input')`则是寻找该表单内的所有`<input>`标签，即文本框。 2. `.on('...
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
10-27
文件所描述的技术可以在不影响页面其他元素的情况下，动态地修改一个或多个特定HTML元素的属性。通过原生JavaScript或jQuery，开发者可以创建更加动态的用户界面，为用户提供更加丰富的交互体验。这种技术常常用于...
动态创建多个文本框取值
01-12
在.NET Web开发中，动态创建多个文本框取值是一个常见的需求，特别是在用户需要输入大量数据或者根据业务逻辑自适应界面元素数量的情况下。标题"动态创建多个文本框取值"所涉及的知识点主要涵盖以下几个方面： 1. *...
JQuery
weixin_45701868的博客
05-17 1484
目录 1. 什么是 JQuery 2. JQuery 特点 3. 入门程序 4. JQuery 语法 4.1.语法 4.2.说明 4.3.核心函数的功能 5. 什么是 Jquery 对象 6. 使用 jQuery 对象的优缺点： 7. 编码习惯 8. DOM 转 Jquery 对象 8.1.语法 8.2.案例 9. JQuery 转 Dom 对象 9.1.语法 9.2.案例 10. 什么是 jQuery 选择器 11. jQuery 选择器的基本语法 12. 基本选择器
Jquery判断其中任意一个文本框的值是否被修改
快乐每一天
03-31 696
[code="js"]// 判断其中任意一个文本框的值是否被修改 // 绑定事件 // 为界面上的所有元素添加focusin和focusout事件， // 用于判断用户是否修改了该值 function bindEvent() { var temp; $("#cplx,#gg,#hth,#zs,#zl").bind({ focusin : function() { ...
jquery监控数据是否变化(修正版)
weixin_30502157的博客
04-12 160
之前写的那篇中存在许多bug，今天重新整理了一下。还请各位指教 View Code 1 ///<reference path="query-1.5.1.min.js" /> 2 (function($) { 3 /*监控页面数据是否发生变化*/ 4 var pageDataChange = false; 5 var tagName = "Input,...
判断页面上控件的值是否已经改变，如果发生改变，我们就需要对其做相关处理
XRX20102的专栏
09-01 1613
我们常常需要判断页面上控件的值是否已经改变，如果发生改变，我们就需要对其做相关处理。如何知道相关控件的值已经发生了变化呢，在这里我们来归纳一下不同类型控件的判断方法： js 方面  比如：1、text、hidden、file、textarea if(objContr
java-连续监测三次值是否一致
随笔
07-14 244
java 连续监测三次值是否一样
判断多个值，equals 重写、简化
D的博客
10-09 2944
public class EqualsTest {          public boolean equals(Object obj) {     //重写equals方法         boolean flag = true;         if (obj instanceof List) {             List list = (List) obj;     //传
js 与 jq 获取多个文本框的值并进行计算区别
sd6275832ght的博客
02-14 2839
首先是以js方式对多个文本框框进行操作 window.onload = function () { //var oTable = document.getElementById("dgv"); //if (oTable) { // var oInput = ...
JQuery如何监听标签内容变化
haitunmin的博客
03-28 4003
百度出来的，jquery方式 监听div这种标签的内容变化，使用DOMNodeInserted $(".intro_selected").find("font").bind('DOMNodeInserted', function () { var aa = $(".intro_selected").find("font").html(); if(aa.length > 0)
同时选择多个html元素,jQuery如何使用选择器选择多个元素？
weixin_36358383的博客
06-03 1943
想要使用jQuery选择器选择多个元素，要怎么实现？下面本篇文章就来给大家介绍jQuery选择器选择多个元素的方法，希望对大家有所帮助。在jQuery中，可以使用以逗号(，)分隔的元素选择器列表--多个元素选择器，或*选择器来选择多个元素。多个元素选择器可用于选取多个元素，需要使用逗号分隔每个元素。*选择器选取文档中的所有元素，包括 html、head 和 body。如果 * 选择器与其他元素一起...
使用jQuery UI实现多元素拖拽排序
"Jquery UI实现一次拖拽多个选中的元素操作" 在Web开发中，jQuery UI 是一个强大的库，提供了丰富的用户界面组件，包括拖放、排序和选择等功能。本篇内容主要关注如何使用jQuery UI 实现一次拖拽多个选中的元素，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值