zoukankan      html  css  js  c++  java
  • 回车键转tab键解决方案一

    <%@ 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=' 120px;'></td>";
    cells[2].innerHTML = "<td align='center'><input name='length' value = " + jsonObj[0].length + " style=' 120px;'></td>";
    cells[3].innerHTML = "<td align='center'><input name='width' value = " + jsonObj[0].width + " style=' 120px;'></td>";
    cells[4].innerHTML = "<td align='center'><input name='height' value = " + jsonObj[0].height + " style=' 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=' 120px;'></td>";
    tr = tr + "<td align='center'><input name='length' value = '0' style=' 120px;'></td>";
    tr = tr + "<td align='center'><input name='width' value = '0' style=' 120px;'></td>";
    tr = tr + "<td align='center'><input name='height' value = '0' style=' 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=' 120px;'></td>";
    cells[2].innerHTML = "<td align='center'><input name='length' value = '1' style=' 120px;'></td>";
    cells[3].innerHTML = "<td align='center'><input name='width' value = '1' style=' 120px;'></td>";
    cells[4].innerHTML = "<td align='center'><input name='height' value = '1' style=' 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" onkeyup="return changefocus_onkeyup()">
    <table style=" 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=" 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=" 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=" 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; 700px;"
    border=1 align="center" cellpadding="0" cellspacing="1">
    <tr style="height:0;">
    <th style=" 100px;">序号</th>
    <th style=" 150px;">重量</th>
    <th style=" 150px;">体积:长</th>
    <th style=" 150px;">宽</th>
    <th style=" 150px;">高</th>
    </tr>
    <tr>
    <td>1</td>
    <td align="center"><input name="union" value = "1" tabIndex=9 style=" 120px;"></td>
    <td align="center"><input name="union" value = "1" tabIndex=10 style=" 120px;"></td>
    <td align="center"><input name="union" value = "1" tabIndex=11 style=" 120px;"></td>
    <td align="center"><input name="union" value = "1" tabIndex=12 style=" 120px;"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td><label>备注:</label></td>
    <td><textarea name="union" id="remark" tabIndex=13 style=" 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>

  • 相关阅读:
    简单爬虫架构解析
    三种urllib实现网页下载,含cookie模拟登陆
    MySQL 从入门到删库
    Python Set
    Python dict
    Python tuple
    Python List
    死锁问题
    线程通信之生产者和消费者案例
    多线程安全和线程同步
  • 原文地址:https://www.cnblogs.com/dreamOfChen/p/5016962.html
Copyright © 2011-2022 走看看