回车键转tab键解决方案一

最新推荐文章于 2023-12-12 16:42:03 发布
最新推荐文章于 2023-12-12 16:42:03 发布
阅读量202 收藏
点赞数
文章标签： javascript java ViewUI
原文链接：http://www.cnblogs.com/dreamOfChen/p/5016962.html
版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>快速录入</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<!--<script type="text/javascript" src="css/jquery-2.0.3.js"></script>-->
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript">
var companyID='${request.companyID}';
var tabObj = new TabObj("input_type2");

$(document).ready(function(){
//$("#kkk table").find("tr:gt(1)").find("td:eq(1)").children().attr("disabled","disabled");
//$("#kkk table").find("tr:last").find("td").children().attr("disabled","disabled");
//$("#kkk table").find("tr:eq(9)").find("td").find("table tr:eq(1)").find("td:gt(0)").children().attr("disabled","disabled");
//$("kkk table").find("tr").find("td:eq(0)").onclick().find("td:eq(1)").attr("disabled","disabled");
$("#ticketNo").focus(function(){

});

$("#ticketNo").blur(function(){
$.post("getPackageByTicketNo.action", {
ticketNo : $("#ticketNo").val()
}, function(data) {

var jsonObj = eval("(" + data + ")");
if (jsonObj.length == 1) {
/* load package information */
$("#customerNo").val(jsonObj[0].customerNo);
$("#senderAddress").val(jsonObj[0].senderAddress);
$("#receiverAddress").val(jsonObj[0].receiverAddress);
$("#count").val(jsonObj[0].count);
$("#remark").val(jsonObj[0].remark);

/* only use the first row to load data from KDBund */
refreshTable(1);

/* add information to row 1, and clear other rows */
refreshTable(jsonObj[0].count);
var cells = document.getElementById('gTable').rows[1].cells;
cells[1].innerHTML = "<td align='center'><input name='weight' value = " + jsonObj[0].weight + " style='width: 120px;'></td>";
cells[2].innerHTML = "<td align='center'><input name='length' value = " + jsonObj[0].length + " style='width: 120px;'></td>";
cells[3].innerHTML = "<td align='center'><input name='width' value = " + jsonObj[0].width + " style='width: 120px;'></td>";
cells[4].innerHTML = "<td align='center'><input name='height' value = " + jsonObj[0].height + " style='width: 120px;'></td>";
} else {
initContent();
}
});
});

$("#count").blur(function(){
var number = parseInt($("#count").val());

refreshTable(number);
});

$("#fastAdd").click(function(){
var weights = getListData("weight");
var lengths = getListData("length");
var widths = getListData("width");
var heights = getListData("height");

$.post("fastAddPackage.action", {
ticketNo : $("#ticketNo").val(),
customerNo : $("#customerNo").val(),
senderAddress : $("#senderAddress").val(),
receiverAddress : $("#receiverAddress").val(),
expressType : $("#expressType").val(),
sort : $("#sort").val(),
payType : $("#payType").val(),
senderAddress : $("#senderAddress").val(),
count : $("#count").val(),
weights : weights,
lengths : lengths,
widths : widths,
heights : heights,
remark : $("#remark").val()
}, function(data) {
var jsonObj = eval("(" + data + ")");
if (jsonObj.result == "true") {
initContent();

$("#ticketNo").val("");
$("#ticketNo").focus();
}

});
});


})

function getListData(name){
var weights = document.getElementsByName(name);
var data = "";
for (var i = 0; i < weights.length; i++){
data = data + weights.item(i).value;

if (i < weights.length - 1){
data = data + ",";
}
}

return data;
}

function refreshTable(number) {
var table = document.getElementById("gTable");

if (number > 0 && number < 100) {
/* remove the rows if the number is changed to small */
for (var i = table.rows.length - 1; i > number; i--) {
table.deleteRow(i);
}

/* add the rows if the number is changed to large */
for (var i = table.rows.length - 1; i < number; i++) {
var tr = "<tr>";
tr = tr + "<td>" + (i + 1) + "</td>";
tr = tr + "<td align='center'><input name='weight' value = '0' style='width: 120px;'></td>";
tr = tr + "<td align='center'><input name='length' value = '0' style='width: 120px;'></td>";
tr = tr + "<td align='center'><input name='width' value = '0' style='width: 120px;'></td>";
tr = tr + "<td align='center'><input name='height' value = '0' style='width: 120px;'></td>";
tr = tr + "</tr>";

$("#gTable").append(tr);

}

}
}

function initContent(){
/* initialize all text */
$("#count").val("1");
$("#remark").val("");

refreshTable(1);

/* var cells = document.getElementById('gTable').rows[1].cells;
cells[1].innerHTML = "<td align='center'><input name='weight' value = '1' style='width: 120px;'></td>";
cells[2].innerHTML = "<td align='center'><input name='length' value = '1' style='width: 120px;'></td>";
cells[3].innerHTML = "<td align='center'><input name='width' value = '1' style='width: 120px;'></td>";
cells[4].innerHTML = "<td align='center'><input name='height' value = '1' style='width: 120px;'></td>";
*/ }

function TabObj(className) {
this.ele = $("." + className);
this.next = next;
}

function next(unit) {
var tmp = this.ele;
$.each(this.ele, function(index, element) {
if (this == unit) {
if (tmp.length > index + 1)
tmp[index + 1].focus();
else
tmp[0].focus();
return false;
}
});

}

function changeEnter() {
if (event.keyCode == 13) {
event.keyCode = 9;
}
};

$(function(){
alert("ooo");
$("input:eq(0)").focus();
$("label").live("click",function(){
$(this).toggle(function(){
$(this).parent().siblings().children().attr("disabled","true");
},
function(){
$(this).parent().siblings().children().removeAttr("disabled");
}
);
});

$("#kkk table tr:eq(9) td table tr:eq(0) th:gt(0)").live("click",function(){
var index=$(this).index()-1;
$(this).toggle(function(){
//alert(index);
$(this).parent().siblings().find("input:eq("+index+")").attr("disabled","true");
},
function(){
$(this).parent().siblings().find("input:eq("+index+")").removeAttr("disabled");
}
);
});
});

function changefocus_onkeyup(){
var inputs = document.getElementsByName("union");
var theEvent = window.event || arguments.callee.caller.arguments[0];
var srcElement = theEvent.srcElement;//IE、chrome
if (!srcElement) {
srcElement = theEvent.target;//firefox
}
key=theEvent.keyCode;
if(key==13)//判断是否按下回车键
{
var CurTabIndex=srcElement.tabIndex+1;//将当前tabindex的值加1
for (var n=0;n<inputs.length;n++)
{
/*$(function(){
inputs[n].focus(function(){
alert("111");
$(this).addClass("main");
});
inputs[n].blur(function(){
$(this).removeClass("main");
});
});*/

if (inputs[n].tabIndex==CurTabIndex) //找到下一个表单元素
{
//alert(inputs[n].nodeName+">>>>>>>>");
//if(inputs[n].nodeName=="select"){
//getNextInput(inputs[n]);
inputs[n].focus();
//inputs[n].select();
//}
//inputs[n].focus(); //移动焦点
//inputs[n].focus().css("border-color","red");
return true;
}
if(inputs[n].tabIndex==14){
n=0;
inputs[n].focus();
return true;
}
}
}
}


/*$(function(){
$("#kkk").keyup(function(e){
//alert("ddddd"+e.which);
var inputs = document.getElementsByName("union");
key=e.which;
if(key==13)//判断是否按下回车键
{
var CurTabIndex=$(this).index()+1;//将当前tabindex的值加1
alert(CurTabIndex+"下表");
for (var n=0;n<inputs.length;n++)
{
if (inputs[n].tabIndex==CurTabIndex) //找到下一个表单元素
{
inputs[n].focus(); //移动焦点
return true;
}
if(inputs[n].tabIndex==14){
n=0;
inputs[n].focus();
return true;
}
}
}
});
});*/
</script>
<style type="text/css">
.tdLabel{text-align:right;};
input:focus{border:1px solid red};
select:focus{border:1px solid red};
textarea:focus{border:1px solid red};
.main{border:1px solid red};
</style>
</head>
<body>
<form id="kkk" οnkeyup="return changefocus_onkeyup()">
<table style="width: 700px;" class="table table-striped table-bordered table-hover"
border=1 align="center" cellpadding=0 cellspacing="1">
<tr bgcolor="#e1e1e1">
<td colspan="2" style="text-align: center;">快速录入</td>
</tr>
<tr>
<td><label>单号：</label></td>
<td><input name="union" id="ticketNo" tabindex=1></td>
</tr>
<div name = "context" onselectstart=" return false">
<tr>
<td><label>客户编号：</label></td>
<td><input name="union" id="customerNo" tabindex=2></td>
</tr>
<tr>
<td><label>快递类别：<label></td>
<td> <select style="width: 150px; height: 35px;"
class="form-control" id="expressType" name="union" tabIndex=3>
<option value="LDX日本线">LDX日本线</option>
<option value="LDX韩国线">LDX韩国线</option>
<option value="LDX国际快递">LDX国际快递</option>
<option value="LDX国内快递">LDX国内快递</option>
<option value="国内EMS">国内EMS</option>
</select></td>
</tr>
<tr>
<td><label>货物类型：</label></td>
<td> <select style="width: 150px; height: 35px;"
class="form-control" id="sort" name="union" tabIndex=4>
<option value="0">文件</option>
<option value="1" selected="selected">包裹</option>
<option value="2">防水袋</option>
</select></td>
</tr>
<tr>
<td><label>付款方式：</label></td>
<td> <select style="width: 150px; height: 35px;"
class="form-control" id="payType" name="union" tabIndex=5>
<option value="0">现付</option>
<option value="1">到付</option>
<option value="2" selected="selected">月结</option>
</select></td>
</tr>
<tr>
<td><label>寄件人地址：</label></td>
<td><input name="union" id="senderAddress" tabIndex=6></td>
</tr>
<tr>
<td><label>收件人地址：</label></td>
<td><input name="union" id="receiverAddress" tabIndex=7></td>
</tr>
<tr>
<td><label>件数：</label></td>
<td><input name="union" id="count" tabIndex=8></td>
</tr>
<tr>
<td colspan="2">
<table id="gTable"
class="table table-striped table-bordered table-hover" style="table-layout:fixed;width: 700px;"
border=1 align="center" cellpadding="0" cellspacing="1">
<tr style="height:0;">
<th style="width: 100px;">序号</th>
<th style="width: 150px;">重量</th>
<th style="width: 150px;">体积:长</th>
<th style="width: 150px;">宽</th>
<th style="width: 150px;">高</th>
</tr>
<tr>
<td>1</td>
<td align="center"><input name="union" value = "1" tabIndex=9 style="width: 120px;"></td>
<td align="center"><input name="union" value = "1" tabIndex=10 style="width: 120px;"></td>
<td align="center"><input name="union" value = "1" tabIndex=11 style="width: 120px;"></td>
<td align="center"><input name="union" value = "1" tabIndex=12 style="width: 120px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label>备注：</label></td>
<td><textarea name="union" id="remark" tabIndex=13 style="width: 400px; height: 100px;"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input name="union" tabIndex=14 type="button" id = "fastAdd" value="确定"></td>
</tr>
</div>
</table>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/dreamOfChen/p/5016962.html

dong0506
关注
回车实现Tab 键 功能
msy_84的专栏
11-18 662
最近在客户那边实施个项目，发现他们用Enter 键的熟练程度简直让人无法想像..一个收汇单，填两栏数据，操作是点确认或者退回，可能刚开始做的时候，光标默认是在退回按钮上的。结果让他们退回了5次，也没有填上要求的两个数据..<br />没办法，只能让他们拿回车当TAB用，他们也强烈这样要求。。网上找到了个用脚本解决的办法.:用客户端脚本在页面添加document的onkeydown事
html 自动切换tab栏,html 实现tab切换的示例代码
weixin_33744799的博客
05-30 1162
tab切换在项目中也算是常用技术，一般实现tab切换都用js或者jq实现，今天介绍两种只用css实现tab切换方法：方法一：原理：通过label标签的关联属性和input的单选类型实现相应div的显示1.创建一个类名为wrap的div当作容器2.创建四个label标签，这将作为tab切换项3.在每一个label中创建一个span标签(导航内容)，input标签(实现选中于取消选中)type类型为r...
回车转换成Tab
tomsoncat的专栏
12-09 752
1.onkeydown">if(event.keyCode==13 && event.srcElement.type!=button && event.srcElement.type!=submit && event.srcElement.type!=reset && event.srcElement.type!=&& event.srcElement.type!=textare
实现回车-->Tab
fengzheng
04-24 1154
function keyDown() { var keycode=event.keyCode; if(keycode==13) { event.keyCode=9; } } document.onkeydown=keycode;  Tab:9enter:13shift:16ctrl:17alt:18 space:320-9:48-57A-Z:65-90a-z:97-122
回车键转tab键
dong0506的博客
12-03 246
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'left.jsp' starting page</title> <!-- <link rel="sty...
Delphi回车键代替Tab 键
08-16
Delphi回车键代替Tab键 Delphi回车键代替Tab 键 Delphi回车键代替Tab 键 Delphi回车键代替Tab 键
表单切换，用回车键替换Tab健(不支持IE)
09-05
通常，用户通过按Tab键在表单元素之间进行切换，但有时我们可能希望用户通过按下回车键来实现这种切换，这样可以提供更友好的交互体验，尤其是对于那些习惯于使用回车键进行确认操作的用户。然而，需要注意的是，这...
回车变成Tab的解决方案
06-21
函数和网上的一些代码，弄了一个可以满足上述需求的解决方案，它的特性包括： <br/> 全部JavaScript代码都封装在了一个用户控件"EnterAsTab_SubPage.ascx"中，哪个页面想要回车变Tab或者屏蔽掉回车键只要把...
WinCE开发技巧：禁OK按钮、USB同步蓝屏解决方案与回车键TAB功能
WinCE应用程序开发技巧涉及多个实用主题，包括Windows CE (WinCE)平台的编程技术、常见问题解决方案以及用户体验优化。 1. WinCE禁止MFC程序窗口上的OK按钮 在WinCE的MFC应用程序开发中，开发者可能需要自定义窗口...
表单填写时用回车代替TAB的实现方法
10-30
在网页设计中，表单是收集用户数据的重要工具。...同时，对于大型或复杂的表单，可能需要更高级的解决方案，例如使用框架（如React、Vue等）提供的表单管理库，它们通常内置了类似的交互优化功能。
火狐下window.event回车改Tab解决方案
01-17
### 火狐浏览器下将回车键事件转换为Tab键事件的解决方案 在Web开发过程中，有时我们需要处理用户在不同浏览器中的键盘操作差异。本文将详细介绍如何在Firefox（火狐）浏览器中将用户按下回车键的行为转换为按下Tab...
用Enter键代替Tab键
02-23
Delphi 组件； 将该控件放在窗体上即可用Enter键，或向上、向下箭头键代替Tab键切换焦点。
delphi把指定字符切换成回车_基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )...
weixin_39626298的博客
12-24 119
第一种方法：$(document).ready(function () {$(':input:text:first').focus();$(':input:enabled').addClass('enterIndex');// get only input tags with class data-entrytextboxes = $('.enterIndex');// now we check ...
文本框Enter回车后换到下一个文本框enterToTab指令
最新发布
qq_22689825的博客
12-12 367
文本框Enter回车后换到下一个文本框enterToTab指令
应用jQuery在easyui中Enter To tab
沐沐坏小孩
05-17 1724
现有客户需求tab键的切换功能转为按enter跳转。
eclipse显示行号和Tab、空格、回车
xzm_cn
05-26 727
设置路径 window->perferences->general->editors->text editors->show line numbers
js 回车转成TAB(利用tabindex)
丿右手年华
03-06 6695
function enterToTab(event, input) { var e = event?event:window.event; var form = document.getElementById('form1'); if(e.keyCode == 13) { var tabindex = input.getAttribute('tabindex'); tabindex+
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值