enter支持向下选择

最新推荐文章于 2021-02-25 14:14:09 发布

CMDjava123

最新推荐文章于 2021-02-25 14:14:09 发布

阅读量238

点赞数

分类专栏： JavaScript 文章标签： js操作键盘

本文链接：https://blog.csdn.net/weixin_43299649/article/details/89383920

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript监听键盘事件，并实现当用户按下'Enter'键时，焦点向下选择的功能。适用于网页表单交互或任何需要响应键盘输入的场景。通过实例代码解析，帮助开发者掌握这一实用技巧。

摘要由CSDN通过智能技术生成

在这里插入图片描述

主要

	$(function() {  
		    $("form[name='contractForm'] input:text").keypress(function(e) {  
		    if (e.which == 13) {// 判断所按是否回车键  
		        var inputs = $("form[name='contractForm']").find(":text"); // 获取表单中的所有输入框  
		        var idx = inputs.index(this); // 获取当前焦点输入框所处的位置  
		        if(idx!=22){
			       
		        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框 
		        	$("#two").focus();
		            $("form[name='contractForm']").val() // 提交表单  
		        } else {  
		        	 alert(idx)
		            inputs[idx + 2].focus(); // 设置焦点  
		            inputs[idx + 2].select(); // 选中文字  
		           
		        }  
		        return false;// 取消默认的提交行为  
		    } 
		        if(idx==22){
				       
			        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框 
			        	$("#two").focus();
			            $("form[name='contractForm']").val() // 提交表单  
			        } else {  
			        	 alert(idx)
			            inputs[1].focus(); // 设置焦点  
			            inputs[1].select(); // 选中文字  
			           
			        }  
			        return false;// 取消默认的提交行为  
			    }  
		    } 
		    });  
		});

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<title>薪酬管理管理</title>
<meta name="decorator" content="ani" />
<script type="text/javascript">
	$(document).ready(function() {

		$(function() {  
		    $("form[name='contractForm'] input:text").keypress(function(e) {  
		    if (e.which == 13) {// 判断所按是否回车键  
		        var inputs = $("form[name='contractForm']").find(":text"); // 获取表单中的所有输入框  
		        var idx = inputs.index(this); // 获取当前焦点输入框所处的位置  
		        if(idx!=22){
			       
		        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框 
		        	$("#two").focus();
		            $("form[name='contractForm']").val() // 提交表单  
		        } else {  
		        	 alert(idx)
		            inputs[idx + 2].focus(); // 设置焦点  
		            inputs[idx + 2].select(); // 选中文字  
		           
		        }  
		        return false;// 取消默认的提交行为  
		    } 
		        if(idx==22){
				       
			        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框 
			        	$("#two").focus();
			            $("form[name='contractForm']").val() // 提交表单  
			        } else {  
			        	 alert(idx)
			            inputs[1].focus(); // 设置焦点  
			            inputs[1].select(); // 选中文字  
			           
			        }  
			        return false;// 取消默认的提交行为  
			    }  
		    } 
		    });  
		}); 
		 $("#myType").val(jp.getDictLabel(${fns:toJson(fns:getDictList('staff_type'))},$("#myType").val())); 
		$("#sum1")									//员工薪酬
        .val(Number($("#base").val())       //基本工资
		+Number($("#post").val())			//岗位工资
		+Number($("#meal").val())			//用餐补助
		+Number($("#transport").val())		//交通补助
		+Number($("#conver").val())			//通话补助
		+Number($("#insur").val())			//保险补助
		+Number($("#add").val())			//额外餐补
		+Number($("#equip").val())			//设备补助
		+Number($("#other").val())			//其他补助
		+Number($("#social").val())			//社保基数
		+Number($("#fund").val())			//公积金基数
		+Number($("#bon").val())			//绩效奖金
		+Number($("#posts").val()));
		
		
		$("#sum")							//专项附加扣除合计
		.val(Number($("#chi").val())		//子女教育
		+Number($("#con").val())			//继续教育
		+Number($("#interes").val())		//住房贷款利息
		+Number($("#hou").val())			//住房租金
		+Number($("#sup").val()));
		var myTime = $("#time").val();
		if(myTime == undefined || myTime == null || myTime == ''){
			$("#myEntryDate").val("");  
 	    }else{
 	    	$("#myEntryDate").val(jp.dateFormat(myTime,"yyyy-MM-dd"));
 	    }
		
        $('#handoverDate').datetimepicker({
			 format: "YYYY-MM-DD"
	    });
        $(".a").change(function(){         
			$("#sum")							//专项附加扣除合计
			.val(Number($("#chi").val())		//子女教育
			+Number($("#con").val())			//继续教育
			+Number($("#interes").val())		//住房贷款利息
			+Number($("#hou").val())			//住房租金
			+Number($("#sup").val()));			//赡养老人
			
			if($("#chi").val()==''){
				$("#chi").val('0.0')
			}

			if($("#con").val()==''){
				$("#con").val('0.0')
			}

			if($("#interes").val()==''){
				$("#interes").val('0.0')
			}
			if($("#hou").val()==''){
				$("#hou").val('0.0')
			}

			if($("#sup").val()==''){
				$("#sup").val('0.0')
			}
		});
        $(".b").change(function(){
			$("#sum1")									//员工薪酬
			        .val(Number($("#base").val())       //基本工资
					+Number($("#post").val())			//岗位工资
					+Number($("#meal").val())			//用餐补助
					+Number($("#transport").val())		//交通补助
					+Number($("#conver").val())			//通话补助
					+Number($("#insur").val())			//保险补助
					+Number($("#add").val())			//额外餐补
					+Number($("#equip").val())			//设备补助
					+Number($("#other").val())			//其他补助
					+Number($("#social").val())			//社保基数
					+Number($("#fund").val())			//公积金基数
					+Number($("#bon").val())			//绩效奖金
					+Number($("#posts").val()));		//岗位津贴
					
					if($("#insur").val()==''){
						$("#insur").val('0.0')
					}

					if($("#base").val()==''){
						$("#base").val('0.0')
					}

					if($("#post").val()==''){
						$("#post").val('0.0')
					}
					if($("#meal").val()==''){
						$("#meal").val('0.0')
					}

					if($("#transport").val()==''){
						$("#transport").val('0.0')
					}
					if($("#conver").val()==''){
						$("#conver").val('0.0')
					}

					if($("#add").val()==''){
						$("#add").val('0.0')
					}
					if($("#equip").val()==''){
						$("#equip").val('0.0')
					}

					if($("#other").val()==''){
						$("#other").val('0.0')
					}
					if($("#social").val()==''){
						$("#social").val('0.0')
					}

					if($("#fund").val()==''){
						$("#fund").val('0.0')
					}
					if($("#bon").val()==''){
						$("#bon").val('0.0')
					}
					if($("#posts").val()==''){
						$("#posts").val('0.0')
					}
					
		});
	});

	
		function save() {
            var isValidate = jp.validateForm('#inputForm');//校验表单
            if(!isValidate){
                return false;
			}else{
                jp.loading();
                jp.post("${ctx}/staff/remunerationadministration/remunerationAdministration/save",$('#inputForm').serialize(),function(data){
                    if(data.success){
                        jp.getParent().refresh();
                        var dialogIndex = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                        parent.layer.close(dialogIndex);
                        jp.success(data.msg)

                    }else{
                        jp.error(data.msg);
                    }
                })
			}

        }
		function setRemuneratiomAdministration(obj) {
			console.log("obj", obj)
			 $("#myType").val(jp.getDictLabel(${fns:toJson(fns:getDictList('staff_type'))},obj[0].type)); 
			 $("#myEntryDate").val(obj[0].entryDate);
			 $("#myEntryDate").val(jp.dateFormat($("#myEntryDate").val(),"yyyy-MM-dd"));
			
		}
	</script>
</head>
<body class="bg-white">
	<form:form id="inputForm" name='contractForm'   modelAttribute="remunerationAdministration"
		class="form-horizontal">
		<form:hidden path="id" />
		<input type="hidden" id="time"
			value="${remunerationAdministration.staffId.entryDate }" />
		<table class="table table-bordered">
			<tbody>
				<tr>
					<td class="width-15 active"><label class="pull-right">员工名称：</label></td>
					<td class="width-35"><sys:gridselect
							url="${ctx}/staff/staffmanagement/staffInfo/data" id="staffId"
							name="staffId.id"
							value="${remunerationAdministration.staffId.id}"
							labelName="staffId.staffName"
							labelValue="${remunerationAdministration.staffId.staffName}"
							title="选择平台员工" cssClass="form-control required"
							fieldLabels="员工名称" fieldKeys="staffName|staffTypeName"
							searchLabels="员工名称" searchKeys="staffName"
							onchange="setRemuneratiomAdministration">
						</sys:gridselect></td>
					<td class="width-15 active"><label class="pull-right">缴费方案：</label></td>
					<td class="width-35"><sys:gridselect
							url="${ctx}/staff/remunerationargs/remunerationArgs/data"
							id="remunerationArgsId" name="remunerationArgsId.id"
							value="${remunerationAdministration.remunerationArgsId.id}"
							labelName="remunerationArgsId.programmeName"
							labelValue="${remunerationAdministration.remunerationArgsId.programmeName}"
							title="选择缴费方案id" cssClass="form-control required"
							fieldLabels="名字" fieldKeys="programmeName" searchLabels="方案名称"
							searchKeys="programmeName"></sys:gridselect></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">员工类型：</label></td>
					<td class="width-35"><form:input id="myType"
							path="staffId.type" htmlEscape="false" class="form-control  "
							readonly="true" /></td>
					<td class="width-15 active"><label class="pull-right">入职日期：</label></td>
					<td class="width-35"><form:input id="myEntryDate"
							path="staffId.entryDate" htmlEscape="false" class="form-control "
							readonly="true" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">员工薪酬：</label></td>
					<td class="width-35"><input htmlEscape="false" id="sum1"
						class="form-control  isFloatGteZero" readonly="true" /></td>
					<td class="width-15 active"><label class="pull-right">基本工资：</label></td>
					<td class="width-35"><form:input path="basePay"
							htmlEscape="false" id="base"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">岗位工资：</label></td>
					<td class="width-35"><form:input path="postWages"
							htmlEscape="false" id="post"
							class="form-control  isFloatGteZero b" /></td>
					<td class="width-15 active"><label class="pull-right">用餐补助：</label></td>
					<td class="width-35"><form:input path="mealSubsidy"
							htmlEscape="false" id="meal"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">工龄工资：</label></td>
					<td class="width-35"><form:input path="postSubsidy"
							htmlEscape="false" id="posts"
							class="form-control  isFloatGteZero b" /></td>
					<td class="width-15 active"><label class="pull-right">绩效奖金：</label></td>
					<td class="width-35"><form:input path="bonus"
							htmlEscape="false" id="bon"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">交通补助：</label></td>
					<td class="width-35"><form:input path="transportationSubsidy"
							htmlEscape="false" id="transport"
							class="form-control  isFloatGteZero b" /></td>
					<td class="width-15 active"><label class="pull-right">通话补助：</label></td>
					<td class="width-35"><form:input path="conversrationSubsidy"
							htmlEscape="false" id="conver"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">保险补助：</label></td>
					<td class="width-35"><form:input path="insuranceSubsidy"
							htmlEscape="false" id="insur"
							class="form-control  isFloatGteZero b" /></td>
					<td class="width-15 active"><label class="pull-right">额外餐补：</label></td>
					<td class="width-35"><form:input path="additionalMeal"
							htmlEscape="false" id="add"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">设备补助：</label></td>
					<td class="width-35"><form:input path="equipmentSubsidy"
							htmlEscape="false" id="equip"
							class="form-control  isFloatGteZero b" /></td>
					<td class="width-15 active"><label class="pull-right">其他补助：</label></td>
					<td class="width-35"><form:input path="otherSubsidy"
							htmlEscape="false" id="other"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">社保基数：</label></td>
					<td class="width-35"><form:input path="socialSecurityBase"
							htmlEscape="false" id="social"
							class="form-control  isFloatGteZero b " /></td>
					<td class="width-15 active"><label class="pull-right">公积金基数：</label></td>
					<td class="width-35"><form:input path="fundBase"
							htmlEscape="false" id="fund"
							class="form-control  isFloatGteZero b" /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">子女教育：</label></td>
					<td class="width-35"><form:input path="childrenEducation"
							htmlEscape="false" id="chi"
							class="form-control  isFloatGteZero a " /></td>
					<td class="width-15 active"><label class="pull-right">继续教育：</label></td>
					<td class="width-35"><form:input path="continuingEducation"
							htmlEscape="false" id="con"
							class="form-control  isFloatGteZero a " /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">住房贷款利息：</label></td>
					<td class="width-35"><form:input path="interestOnHousingLoans"
							htmlEscape="false" id="interes"
							class="form-control  isFloatGteZero a " /></td>
					<td class="width-15 active"><label class="pull-right">住房租金：</label></td>
					<td class="width-35"><form:input path="housingRent"
							htmlEscape="false" id="hou"
							class="form-control  isFloatGteZero a " /></td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">赡养老人：</label></td>
					<td class="width-35"><form:input path="supportForTheElderly"
							htmlEscape="false" id="sup"
							class="form-control  isFloatGteZero a " /></td>
					<td class="width-15 active"><label class="pull-right">专项附加扣除合计：</label></td>
					<td class="width-35"><form:input
							path="totalSpecialAdditionalDeductions" htmlEscape="false"
							id="sum" class="form-control  isFloatGteZero" readonly="true" />
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">备注描述：</label></td>
					<td class="width-85" colspan="3"><form:textarea path="remarks"  type="ae"
							htmlEscape="false" rows="4" maxlength="2000"  id ="two"
							class="form-control " /></td>
				</tr>
			</tbody>
		</table>
	</form:form>
</body>
</html>