仅防止在提交按钮上输入，而不是表单的其余部分[重复]

Question

好的，所以我一直在寻找可以执行此操作的一段代码，但没有什么适用于我的情况。

我的问题：我试图阻止表单在按下“ENTER”键时提交，但允许表单内的我的搜索脚本在按下 Enter 键时提交。

我发现的是阻止 Enter 键期间的脚本，或者该脚本不起作用，因为我认为我使用 <button> 而不是 <input> 作为我的提交按钮，我不是真的。

我的表格

<form action="" method="post" onsubmit="return false;" id="myform">

我的 javascript 用于我的搜索

    function showSub(str) {
    var xmlhttp;
    if (str=="") {
      document.getElementById("txtSub").innerHTML="";
      return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtSub").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","findLogo.php?q="+encodeURIComponent(str),true);
    xmlhttp.send();
}  
$(document).on('change', '#searchText', function() {
// Get the search text
var searchText = $(this).val();
// Make sure it isn't empty
    if (searchText.length > 0) {
        // Send the update request
        showSub(searchText);
    }
});

我的搜索输入

<input type="text" id="searchText" value="" />
<div id="txtSub"></div>

我的提交按钮

<input type="hidden" value="Post" name="submit" /> 
<button type="submit" style="height:33px; width:50px">
<img src="../css/images/plus_25.png" />
</button>

我的 java-script 后提交脚本

<script type="text/javascript">
$(function(){
    $('button[type=submit]').click(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "postadd.php",
            data: $("#myform").serialize(),
            beforeSend: function(){
                $('#result').html('<div class="success"><img src="../images/loading-blue.gif" width="25" /></div>');
            },
            success: function(data){
                $('#result').html(data);
                $('html, body').animate({scrollTop:$(document).height()}, 'slow');
                //document.getElementById('footer').scrollIntoView();
            }
        });
    });
});

Answer 1

解决方案基本上是基于检测按键并阻止表单提交

1. 首先制作两个用于搜索和表单提交的按钮为<input type="button" />
2. 为了区分搜索按钮和提交按钮，我在这里添加了合适名称的类，我添加了.submit 和.Search
3. 另一件事，.submit button 上使用了链接，它用于防止在按下的键是回车键时执行单击事件块
4. 如果使用 Enter 键阻止提交会导致另一个问题，如果单击任何其他按钮，则通过选择该按钮表单将进入以防止其他情况也被添加，这会阻止使用提交按钮提交基于按钮的表单，另一个优点是您可以添加任何自定义按钮以进行提交
5. 接下来，Click 块提交通过第 4 步到达的表单，如果按键是开始执行进程的原因，则该步骤停止

---

两个示例添加了一个基于单击的提交按钮，另一个基于单击/Enter 进行搜索

另一个优点是它不会阻止您使用输入搜索按钮

Solved Click for demo To know the difference submit with enter key and search with enter key

HTML

<input type="button" class="Submit" value="Submit"/>

<input type="button" class="Search"  value="Search"/>

jQuery

​​>

$("input.Submit").keypress(function(event){

    if(event.which=='13'){

        alert("Key enter key entered ");
     event.preventDefault();



 }else{
      event.preventDefault();
    }


}).click(function(event){
    alert("Here is the submit Button works on click write jquery ");

  $( "#FormId" ).submit();
});


//The Code For Search Which could be triggered by both keypress and click


  $("input.Search").click(function(event){

              alert("Works for both enter and click");
            });

编辑：

Demo With Search just like google on entering text to search on text box and clicking enter triggers the search

在搜索框中输入一些文字按回车键

jQuery

​​>

$("input.Search").keypress(function(event){

          if(event.which=='13'){

            alert("Key enter key entered ");

        }
    });