Question

我的表单包含大约10个输入文本框，问题是当我从输入文本框按Enter键时，直接跳过它们之间的文本框将要提交按钮。我在下面添加了我的代码段。用鼠标

function getElement(elm){
    var elem = document.getElementById(elm);
    return elem;
}


function sendData(){
    getElement('submit-button').addEventListener("click",function(){
        getElement("success-txt").removeClass('display-none');
        if(getElement('pbarcode')){
            var pbarcode = $('#pbarcode').val();
            var pname = $('#pname').val();
            var pprice = $('#pprice').val();
            var poprice = $('#poprice').val();
            $.ajax({
                     url:'getdata.php',
                     method:"post",
                     data:{pbarcode:pbarcode,pname:pname,pprice:pprice,poprice:poprice},
                     cache: false,
                     onSuccess: function(response){
                                alert('success');
                     },
                     onFailure: function(response){
                                alert('failure');
                     }
            });
        }
        else{
           alert("error"); 
        }

    });
}


function showWarnMessage(){
    getElement("submit-button").addEventListener("click",function(){
       alert("you enteres submitt button");
       var data1 = $('#pbarcode').val();
       var data2 = $('#pname').val();
       var data3 = $('#pprice').val();
       var l3 = data3.length;
       var l1 = data1.length;
       var l2 = data2.length;
       var flag = 0;
       if(l1 < 1){
     
           flag = 1;
       }
       if(l2 < 1){
           flag = 1;
           
       }
       if(l3 < 1){
           flag = 1;
       }
       alert(flag);
       if (flag == '0'){
           alert(flag + "go");
           sendData();
       }
    });
}

showWarnMessage();

ul,li {
list-style : none;
padding :0px;
margin : 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="create-user" method="post">
                            <ul id="create-new-user-page">
                                <li>
                                    <span>Product Barcode</span>
                                    <input type="number" id="pbarcode" name="barcode" class="form-data" required>
                                </li>
                                <li>
                                    <span>Product Name</span>
                                    <input type="text" class="form-data" name="pname" id="pname" required>
                                </li>
                                <li>
                                    <span>Product Price</span>
                                    <input type="number" class="form-data" name="pprice" id="pprice" required>
                                  
                                </li>
                               
                                <li>
                                    <input type="submit" id="submit-button"  Value="Submit" name="submit_data">
                                </li>
                
                            </ul>
                            
                        </form>

到目前为止，我一直在尝试使用

event.preventDefault（）;

在“输入”文本框中单击，我在下面添加了代码

function preventDefault(elem){
   getElement('elem').addEventListener('keypress',function(){
       if (event.keyCode == 13) {
            event.preventDefault();
            alert('calling ')
       }
   }); 
}
preventDefault('pname');
preventDefault('pprice');
preventDefault('pname');
preventDefault('pbarcode');

，但是它也返回相同的结果。我想使用Enter键可以正常工作。（即，当我从一个输入文本框中按下“ enter”键时，应移至下一个文本框中，而不是直接移至表单提交按钮）

Answer 1

您可以将按钮类型更改为提交给 button 。

<input type="button" id="submit-button"  Value="Submit" name="submit_data">

阻止在表单上进行默认输入

1 个答案: