enter键执行某些操作javascript
提问于 2014-08-18 18:44:42
我正在使用Bootstrap和jQuery。当我在跟踪字段中输入一些内容，然后按enter键时，没有任何反应。因为我没有使用from属性。但是如果我写了一些东西，然后我按下Check按钮，它就会加载一个模式并执行checkform()函数。问:当我按下按钮时，我也想做同样的事情。我该怎么做呢？
HTML：
<input type="text" placeholder="Tracking Kod" name="tracking" id="tracking"
class="form-control" autocomplete="off" required>
<button type="submit" class="btn btn-success" id="checkbutton"
onclick="checkform();" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-check"></span> Check
</button>Javascript：
function checkform()
{
var tracking = document.getElementById("tracking");
var modal = document.getElementById("modal");
if(tracking.value == '')
{
modal.innerHTML = '<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-remove"></span> Xahiş edirik tracking daxil edin!</div>';
return false;
}
else
{
modal.innerHTML = '<div class="alert alert-info" role="alert"><span class="fa fa-spinner fa-spin"></span> Gözləyin</div>';
}
var url = 'track.php?tracking=' + tracking.value + '';
$.get(url, function(response) {
$( "#modal" ).hide(0.1);
$( "#modal" ).show( "slow" );
modal.innerHTML = response;
});
}我试过这个代码。添加到body标记的末尾：
<script>
$.fn.enterKey = function (fnc) {
return this.each(function () {
$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if (keycode == '13') {fnc.call(this, ev);}
})
})
}
$("#tracking").enterKey(function () {checkform();});
</script>
回答 2
Stack Overflow用户
发布于 2014-08-18 19:00:49
<script type="text/javascript">
$.fn.enterKey = function (fnc) {return this.each(function () {$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if (keycode == '13') {document.getElementById("checkbutton").click();}})})
}
$("#tracking").enterKey(function () {checkform();});
</script>Stack Overflow用户
发布于 2014-08-18 19:01:17
首先需要使用表单的onsubmit事件，而不是onclick按钮，然后需要在回调函数中阻止表单的默认操作。
html
<form onsumbit="checkfrom(event)">
</form>JS
function checkform(event) {
event.preventDefault();
//rest of code
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25370021
复制相关文章
腾讯云开发者
