检查 Button press 和 Enter press

Check for Button press and Enter press

我在按下按钮后制作了一个扩展表单,但现在我想添加 Enter 按键,但我不知道如何。也许有人可以帮助我!?

代码

$(document).ready(
    function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&id=7fa42966ee";
            }
        });
    });

我还想检查 3 个输入字段是否为空。

输入键你需要事件,然后你可以检查事件=13,它是输入键的ascii

$("#entersomething").keyup(function(e) {
    alert("up");
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code==13) {
       //do something
    }


});

或者你可以用我认为更可靠的按键

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

试试这个:

$(document).ready(
    function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&id=7fa42966ee";
            }
        });



$('#form-expand').keypress(function (e) {
  if (e.which == 13) {
    $('#expand-form-button').click();
    return false;  
  }
});


    });

我得到了一些东西,我触发按钮点击 Enter 按键,这是最简单的方法。

    $(document).ready(function() {
    $(".form-fieldError").hide();
        $("#expand-form-button").click(function() {
            if( document.getElementById('sign_up_email').value === '' ){
                $(".form-fieldError").show(1);
            }else{
                $("#form-expand").fadeToggle();
                $("#expand-form-button").hide(1);
                document.getElementById("mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&id=7fa42966ee";
            }
        });

     $('#sign_up_email').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#expand-form-button').click();//Trigger search button click event

        }
    });
});

现在我想添加字段验证如果为空(或电子邮件错误),然后显示 div ,错误在哪里

我想这就是您要找的东西? 如果您对此有任何疑问,请随时提出。

$('form').keypress(function (e) {
  if (e.which == 13) {                   // 13 = keycode for Enter
    $('input').each(function(){          // the 3 (or more) inputs to check
      var value = $(this).val();
      if(!(value.lenth > 0)){            // If Inputs are empty
        alert("You have to fill in the given inputs");
        return false;                    // return and don't go on
      }
    });
    $('.yourform').submit();             // submit form
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我不确定这是否正是您想要的..但​​我认为这应该是一个好的开始!

$(document).ready(function() {

function expandFormBtn() {
    $('input').each(function(){
      var value = $(this).val();
      if(!(value.length > 0)){
        $(".form-fieldError").show(1);
        return;
      }
    });
    $("#form-expand").fadeToggle();
    $("#expand-form-button").hide(1);
    $("#mc-embedded-subscribe-form").action ="http://skyflex.us14.list-manage.com/subscribe/post?u=5321ce4878800c447658224d3&amp;id=7fa42966ee";
    return false;
  
}

  $(".form-fieldError").hide();
  $("#expand-form-button").click(function() {
   expandFormBtn();
  });
  
  $('form').keypress(function (e) {
    if (e.which == 13) {
      expandFormBtn();
    }
  });
});