按下回车时使用 Javascript答案

【问题标题】：Use Javascript when pressing enter按下回车时使用 Javascript
【发布时间】：2013-04-11 18:31:24
【问题描述】：

当我在输入字段中按下回车时，我想调用一个函数。问题是，它此时只是重新加载页面，而不调用 JavaScript。当我按下按钮时，JavaScript 可以正常工作。现在我想得到同样的结果，当我按下回车键时。

这是我的表格

<form onSubmit="changeView()">
<input type="text" value="London" name="region" id="region">
<input type="button" onClick="changeView()" name="mySubmit" value="Search" >
</form>

我也尝试将其放入文本字段onKeydown="Javascript: if (event.keyCode==13) changeView();

但这并没有真正帮助。这是我的 JavaScript 函数

function changeView(){
var region = document.getElementById('region').value;
$.ajax({
    type: 'GET',
    url: 'webservice.php',
    data: {region: region},
    success: function(response, textStatus, XMLHttpRequest) { 
        alert("SUCCESS");
        map.panTo(new L.LatLng(response[0].lat,response[0].lon));
    }
});
return false;
}

【问题讨论】：

您需要阻止 keydown 事件传播。一旦你的 onkeydown 完成，输入仍然在系统中，并且会向上冒泡并提交表单。快速/肮脏的方法是在 onkeydown 结束时简单地做一个return false;。
重复？ stackoverflow.com/questions/895171/…

标签： javascript html submit enter

【解决方案1】：

HTML：

<form action="webservice.php" method="post">
    <input type="text" value="London" name="region" id="region">
    <input type="submit" name="mySubmit" value="Search" >
</form>

Javascript：

$('#region').on('keydown', function(e) {
     if (e.which === 13) {
                $(this).parent('form').submit(); 
            }

    });


    $('.form').on('submit', function(e) {
        var self = $(this);

         $.ajax({
                type: self.attr('method') ,
                url: self.attr('action'),
                data: {region: $('#region').val()},
                success: function(response, textStatus, XMLHttpRequest) { 
                    alert("SUCCESS");
                    map.panTo(new L.LatLng(response[0].lat,response[0].lon));
                    }
            });
        e.PreventDefault();
        return false;
    });

【讨论】：

【解决方案2】：

看起来你正在使用 jQuery，你有没有想过只是将一个事件绑定到文本框

类似的东西

$(document).ready(function(){ // binds when the document has finished loading
    $("#region").on('keypress', function(e){
        if (e.which === 13){  // enter key
            changeView();
        }
    });
});

【讨论】：

jQuery 规范化 e.which 所以第 3 行是多余的。