Question

我遇到了问题。我有这个简单的HTML代码。

<form name="myform" method="POST" action="">
    <div>
        <p>
            <input id="query" type="text" size ="60" title="Enter your search string here." style="font-size:12px;" />
            <input id="startSearch" type="button" value="Search Resource" />
         </p>
    </div>

    <div id="pageContents" >

    </div>
</form>

我正在使用这个Jquery代码来运行我的程序

$(document).ready(function() {

    $('#query').keypress(function(e) {
        if (e.keyCode == '13') {
            alert( 'enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function() {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if(model=='combined'){
            $('#pageContents').load('combinedsearch.jsp?q='+encodeURIComponent(query)+'&m='+model);
        } else {
            $('#pageContents').load('search.jsp?q='+encodeURIComponent(query)+'&m='+model);
        }

    });
});

问题是：当有人按下开始搜索按钮时，$('#startSearch').click(function()效果很好。但$('#query').keypress(function(e))捕获事件并处理我的代码，但从未将结果显示回浏览器。我认为加载功能在$('#query').keypress(function(e))函数内不起作用。任何人都可以指导我

Answer 1

当您按 Enter 时，您需要阻止提交表单的默认操作。

$('#query').keypress(function(e) {
    if (e.keyCode == '13') {
        e.preventDefault();
        alert( 'enter key is pressed ');
        $('#startSearch').click();
    }
});

Answer 2

你做得太多了;）它是一种形式，它的主要事件＆＃34;是一个submit - 当有人点击＆＃34;进入＆＃34;或单击提交按钮。因此，您的HTML应如下所示：

<form id="myform">
  <input id="query">
  <input type="submit" value="Search Resource" />
</form>

和你的JS：

$(function(){

  // DOM ready

  $('#myform').on('submit', function(e){

    e.preventDefault();

    // Your search code
    // ...

  });

});

Answer 3

我不会使用按键。使用keydown或keyup。

如jquery api中所述：

注意：由于按键事件未被任何官员承保规范，使用它时遇到的实际行为可能不同浏览器，浏览器版本和平台。

Answer 4

根据我的提琴，这可以按预期工作：http://jsfiddle.net/65HSm/

HTML：

<div id="pageContents"></div>
<input type="text" id="query">
<input type="button" id="startSearch" value="search">

JS：

$(document).ready(function () {
    $('#query').keypress(function (e) {
        if (e.keyCode == '13') {
            alert('enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function () {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if (model == 'combined') {
            console.log('load 1');
            console.log(query);
            $('#pageContents').load('combinedsearch.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        } else {
            console.log('load 2');
            console.log(query);
            $('#pageContents').load('search.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        }

    });
});

jquery load函数在keypress函数内不起作用

4 个答案: