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>
    <script src="js/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    var companyID='${request.companyID}';
    var tabObj = new TabObj("input_type2");

    var enterFunc =function(e){
    var key = e.which;
    var index = -1;
    var item = null;
    if(key==13){
    /* if (this.id == "ticketNo"){
    if ($("#addAtOnce")[0].checked == true){
    saveRecord();
    }
    } */
    if (this.id == "fastAdd"){
    saveRecord();
    } else {
    /* index= $input.index(this)+1; */
    item = getNextInput(this);
    }
    /* if(index==4){
    $("#butt").submit();
    index=0;
    }*/

    } else if(key==38){
    if (this.nodeName != "SELECT"){
    item = getPrevInput(this);
    }
    /* index= $input.index(this) - 1; */
    } else if(key==40){
    if (this.nodeName != "SELECT"){
    item = getNextInput(this);
    }
    /* index= $input.index(this) + 1; */
    }

    if (item != null){
    e.preventDefault();

    item.focus();
    item.select();
    /* $("input:eq("+index+")").focus();
    $("input:eq("+index+")").select(); */
    }
    }

    var dblClickFunc =function(){
    var id = this.id;

    if (id == "lbl_gTable"){
    revertInputStyle("weight");
    revertInputStyle("length");
    revertInputStyle("width");
    revertInputStyle("height");
    } else{
    var inputID = id.substr(4);

    if (document.getElementById(inputID).disabled==true){
    document.getElementById(inputID).disabled = false;
    }else{
    document.getElementById(inputID).disabled = true;
    }
    }


    }

    $(document).ready(function(){
    /* $("#addAtOnce").click(function(){
    disableInput($("#addAtOnce")[0].checked);
    }); */

    $("#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;' class='InputType'></td>";
    cells[2].innerHTML = "<td align='center'><input name='length' value = " + jsonObj[0].length + " style=' 120px;' class='InputType'></td>";
    cells[3].innerHTML = "<td align='center'><input name='width' value = " + jsonObj[0].width + " style=' 120px;' class='InputType'></td>";
    cells[4].innerHTML = "<td align='center'><input name='height' value = " + jsonObj[0].height + " style=' 120px;' class='InputType'></td>";
    } else {
    initContent();
    }

    getCustomerName();
    });

    });

    $("#customerNo").blur(function(){
    getCustomerName();
    });

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

    refreshTable(number);
    });

    /* $("#fastAdd").click(function(){

    saveRecord();
    }); */


    })

    function saveRecord(){
    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(){
    $("#ticketNo").focus();

    registerEnterFunc();

    $label = $("label");
    $label.bind("click",dblClickFunc);
    });

    function registerEnterFunc(){
    /*$input = $("input");
    $input.bind("keydown",enterFunc); */

    $input = document.getElementsByClassName("InputType");
    for (var i = 0; i < $input.length; i++){
    $input.item(i).addEventListener("keydown",enterFunc);
    }

    }

    function getNextInput(current){
    var item = null;

    var start = false;
    for (var i = 0; i < $input.length; i++){
    if (start == true){
    if ($input.item(i).disabled == false){
    item = $input.item(i);
    break;
    }
    }else if ($input.item(i) == current){
    start = true;
    }
    }

    return item;
    }

    function getPrevInput(current){
    var item = null;

    var stop = false;
    for (var i = 0; i < $input.length; i++){
    if ($input.item(i) == current){
    stop = true;
    break;
    } else if (stop == false){
    if ($input.item(i).disabled == false){
    item = $input.item(i);
    }
    }
    }

    return item;
    }


    function getCustomerName(){
    $.post("getCustomerName.action", {
    customerNo : $("#customerNo").val()
    }, function(data) {
    var jsonObj = eval("(" + data + ")");
    document.getElementById("customerName").innerHTML = jsonObj.customerName;

    });
    }

    function disableInput(flag){

    if (flag == true){
    $("#fastAddForm table").find("tr:gt(1)").find("td:eq(1)").children().attr("disabled","disabled");
    $("#fastAddForm table").find("tr:last").find("td").children().attr("disabled","disabled");
    $("#fastAddForm table").find("tr:eq(9)").find("td").find("table tr:eq(1)").find("td:gt(0)").children().attr("disabled","disabled");
    } else {
    $("#fastAddForm table").find("tr:gt(1)").find("td:eq(1)").children().attr("disabled",false);
    $("#fastAddForm table").find("tr:last").find("td").children().attr("disabled", false);
    $("#fastAddForm table").find("tr:eq(9)").find("td").find("table tr:eq(1)").find("td:gt(0)").children().attr("disabled",false);
    }
    }


    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 revertInputStyle(name){
    var elements = document.getElementsByName(name);
    var current = elements.item(0).disabled;
    for (var i = 0; i < elements.length; i++){
    if (current==true){
    elements.item(i).disabled = false;
    }else{
    elements.item(i).disabled = true;
    }
    }
    }


    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;' class='InputType'></td>";
    tr = tr + "<td align='center'><input name='length' value = '0' style=' 120px;' class='InputType'></td>";
    tr = tr + "<td align='center'><input name='width' value = '0' style=' 120px;' class='InputType'></td>";
    tr = tr + "<td align='center'><input name='height' value = '0' style=' 120px;' class='InputType'></td>";
    tr = tr + "</tr>";

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

    }

    registerEnterFunc();
    }
    }

    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;
    }
    };
    </script>

    <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>快速录入</title>
    <style type="text/css">
    .tdLabel{text-align:right;}

    </style>
    </head>
    <body>
    <form id="fastAddForm">
    <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;">快速录入<!-- <input type = "checkbox" id="addAtOnce" > 扫描单号立即录入 --></td>
    </tr>
    <tr>
    <td>单号:</td>
    <td><input name="ticketNo" id="ticketNo" class="InputType"></td>
    </tr>
    <div name = "context" onselectstart=" return false">
    <tr>
    <td><label id="lbl_customerNo">客户编号:</label></td>
    <td><input name="customerNo" id="customerNo" class="InputType"> <span id = "customerName"></span> </td>
    </tr>
    <tr>
    <td><label id="lbl_expressType">快递类别:</label></td>
    <td> <select style=" 150px; height: 35px;"
    class="InputType" id="expressType" name="expressType" >
    <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 id="lbl_sort">货物类型:</label></td>
    <td> <select style=" 150px; height: 35px;"
    class="InputType" id="sort" name="sort">
    <option value="0">文件</option>
    <option value="1" selected="selected">包裹</option>
    <option value="2">防水袋</option>
    </select></td>
    </tr>
    <tr>
    <td><label id="lbl_payType">付款方式:</label></td>
    <td> <select style=" 150px; height: 35px;"
    class="InputType" id="payType" name="payType">
    <option value="0">现付</option>
    <option value="1">到付</option>
    <option value="2" selected="selected">月结</option>
    </select></td>
    </tr>
    <tr>
    <td><label id="lbl_senderAddress">寄件人地址:</label></td>
    <td><input name="senderAddress" id="senderAddress" class="InputType"></td>
    </tr>
    <tr>
    <td><label id="lbl_receiverAddress">收件人地址:</label></td>
    <td><input name="receiverAddress" id="receiverAddress" class="InputType"></td>
    </tr>
    <tr>
    <td><label id="lbl_count">件数:</label></td>
    <td><input name="count" id="count" value = "1" class="InputType"></td>
    </tr>
    <tr>
    <td colspan="2"><label id="lbl_gTable">货物信息</label></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="weight" value = "1" style=" 120px;" class="InputType"></td>
    <td align="center"><input name="length" value = "1" style=" 120px;" class="InputType"></td>
    <td align="center"><input name="width" value = "1" style=" 120px;" class="InputType"></td>
    <td align="center"><input name="height" value = "1" style=" 120px;" class="InputType"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td><label id="lbl_remark">备注:</label></td>
    <td><textarea name="remark" id="remark" style=" 400px; height: 100px;" class="InputType"></textarea></td>
    </tr>
    <tr>
    <td colspan="2" style="text-align: center;"><input type="button" id = "fastAdd" value="确定" onclick="return saveRecord();" class="InputType"></td>
    </tr>
    </div>
    </table>
    </form>
    </body>
    </html>

  • 相关阅读:
    MySQL如何利用索引优化ORDER BY排序语句 【转载】
    c++拼接字符串效率比较(+=、append、stringstream、sprintf)
    Mysql 的字符编码机制、中文乱码问题及解决方案【转载】
    Java连接MySQL中文乱码处理【转载】
    Java 接口
    Java 抽象类和Final关键字
    Java 对象转型
    Java 动态绑定和多态
    Java 继承和访问控制
    Java Class Object
  • 原文地址:https://www.cnblogs.com/dreamOfChen/p/5016970.html
Copyright © 2011-2022 走看看