发表新帖
发表新帖

Use Javascript to change which submit is activated on enter key press

前端 未结
关注
6 1938
深忆病人
深忆病人 2021-01-01 12:09

I have a form on an HTML page with multiple submit buttons that perform different actions. However, when the user is typing a value into a text input and hit enters, the bro

相关标签:
6条回答
  • 旧时难觅i
    2021-01-01 12:54

    How about using CSS? You can just set the first button, your default button outside of the visible area of the screen with a "position: absolute; left: -200px; top: -200px;". As far as I remeber, it will not be ignored by any browser, because it is not invisible. This works just fine:

    <form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
       style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>

    And the earth gets saved ...

    0 讨论(0)
  • 谎友^
    2021-01-01 12:59

    One way would be to remove all of the submit buttons and use input buttons to submit the form programatically. This would remove the ability to submit the form by hitting the enter key in a textbox. You could also leave one submit button as the default submit functionality, and use regular button inputs for the others and submit the form programatically.

    The obvious short-fall of this is that the users would require JavaScript to be enabled. If this isn't a problem this is a consideration for you.

    EDIT:

    Here, I tried to make an example for you using jQuery (the same functionality can easily be created without jQuery)... let me know if this helps...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function(){
        $("#f input").filter(":text").keydown( function(event) {
            if (event.keyCode==13) {
                $(this).nextAll().eq(0).click();
            }
        });
    });
    //--></script>
</head>
<body>
    <form name="f" id="f">
        <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
        <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
        <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
    </form>
</body>
</html>
    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-01 13:01

    What about using separate forms? Maybe I'm missing something which makes this impossible :P

    0 讨论(0)
  • 礼貌的吻别
    2021-01-01 13:04

    Just control the key press event. put onKeyPress in the body tag

    
onkeypress=CheckKeyPress()

    Then handle the enter key

    
function CheckKeyPress(){
    var code;
    if(!e) var e = window.event;
    if(e.keyCode){
        code = e.keyCode;
    }else if(e.which){
        code = e.which;
    }
    if(code == 13){
        //Do Something
    }
}
    0 讨论(0)
  • 余生分开走
    2021-01-01 13:06

    Don't intercept the keydown event, intercept the submit event.

    so: 

    form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
    0 讨论(0)
  • 自闭症患者
    2021-01-01 13:07

    The invisible default submit action is a reasonable approach and doesn't drag JavaScript into the equation. However form elements with 'display: none' aren't generally reliable. I tend to use an absolutely-positioned submit button before the others on the page, positioned off the left-hand-side of the page. It's still pretty ugly, but gets the job done.

    0 讨论(0)
 看不清?
提交回复
热议问题