Question

当按下tab或enter时，如何将我的函数设置为tab到下一个元素，即提交按钮。当按下“/”（即代码“191”）时，要聚焦第一个元素而不是向下标签以提交表单？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

window.addEventListener('keydown', keydownCallback);

function keydownCallback(event) {
  if (event.keyCode === 191) {
    setTimeout(setFocusToTextBox);
  }
}

function setFocusToTextBox() {
  document.getElementById("order_number").focus();
   if (evt.preventDefault) {
            evt.preventDefault();
        } else if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.returnValue = false;
        }
}

function getNextElement(field) {
    var form = field.form;
    for ( var e = 0; e < form.elements.length; e++) {
        if (field == form.elements[e]) {
            break;
        }
    }
    return form.elements[++e % form.elements.length];
}

function tabOnEnter(field, evt) {
    if (evt.keyCode === 13) {
        if (evt.preventDefault) {
            evt.preventDefault();
        } else if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.returnValue = false;
        }
        getNextElement(field).focus();
        return false;
    } else {
        return true;
    }
}

</script>
</head>

<body onLoad="document.chip_insert.chip_number.focus();">

<center>
<h1>Jeffers HomeAgain Microchip Entry</h1>


<form name="chip_insert"  id="chip_insert" action="<?php echo $PHP_SELF;?>" onsubmit="return validateForm()" method="post" onkeydown="keydownCallback(event)">
Order Number: <input tabindex="1" maxlength="11" type="text" name="order_number"  id="order_number"  value="<?php echo $value; ?>"  required="required"onkeydown="return tabOnEnter(this,event)" onfocus="this.focus();this.select()" /><br /><br />
Tag Number: <input tabindex="2" maxlength="15" type="text" name="chip_number" id="chip_number" required="required" onfocus="this.focus();this.select()" /><br /><br />
<input tabindex="7" type="submit" />
</center>
</form>

<br />

<!--End body content -->

</body>
</html>

如何为同一元素执行多个击键功能？

0 个答案: