SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict chartahir's Avatar
    Join Date
    Oct 2006
    Location
    Karachi, Pakistan
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable Enter key

    I want to disable the enter key to submit a form, how can i do this ?
    chartahir

  2. #2
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're suggesting is counter-accessibility - if you disable the enter key, you make it a lot more difficult for keyboard users to submit the form.

    Why do you want this?

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    submit

    Don't use an input type submit. Use an input type button that calls your submit function instead. Just make sure you tabindex it so users can get to it and submit the form with their enter key.

  4. #4
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's one possibility yes, but it still breaks the keyboard access model to some extent - it is expected behavior that hitting enter from within a text field submits the form.

    And don't tabindex it - don't use tabindex at all

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Don't use an input type submit. Use an input type button that calls your submit function instead. Just make sure you tabindex it so users can get to it and submit the form with their enter key.
    That does not prevent submission, and if JS is not available, the button is a zombie.
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use tabindex? Now you got me curious! Why??

  7. #7
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <form action="foo">
    <input type="text" onkeypress="return bar(event)">
    <input type="submit">
    </form>
    
    <script type="text/javascript">
    function bar(evt){
    var k=evt.keyCode||evt.which;
    return k!=13;
    }
    </script>
    Code:
     
    <script type="text/javascript">
    
    function stopRKey(evt) {
      var evt = (evt) ? evt : ((event) ? event : null);
      var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
      if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
    }
    
    document.onkeypress = stopRKey;
    
    </script>
    
    
    <form name="form1" method="post" action="">
    <fieldset id="form1" style="width: 30&#37;; line-height: 30px;">
    <label for="name">Name:    </label>
    <input class="inputfield" name="name" maxlength="64" size="32" type="text">
    <br>
    <label for="email">E-Mail:   </label>
    <input class="inputfield" name="email" value="" maxlength="64" size="32" type="text">
    <br>
    <label for="country">Country: </label>
    <input class="inputfield" name="country" value="" maxlength="64" size="32" type="text">
    <br>
    <input value="Submit" name="send" type="submit" style="margin-left: 50px;" onclick="alert('This would have processed the form');">
    </fieldset>
    </form>
    http://javascript.internet.com/forms...enter-key.html
    Last edited by muazzez; Apr 18, 2007 at 13:14.
    The Time Through Ages. In the Name of Allah, Most Gracious, Most Merciful.
    1. By the Time, 2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  8. #8
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wysiwyg View Post
    Don't use tabindex? Now you got me curious! Why??
    Have a look here - http://www.webaim.org/techniques/keyboard/tabindex.php

  9. #9
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chartahir View Post
    I want to disable the enter key to submit a form, how can i do this ?
    This may work for you: Link
    Tab-indentation is a crime against humanity.

  10. #10
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh*

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chartahir,

    Can we see the script you're using?

    I was actually searching for the answer myself when I came across this thread, and managed to find the answer during my search.

    What you have to realise is that the event triggered by the user when the Enter button is pressed is keypress (as well as keyup and keydown), but this also triggers a submit event on the form level. Therefore, you have to disable the submit event for this to work.

    The reason why I needed this functionality was because I'm running a validation before the form can be submitted. So what I'm interested in is preventing the submit, so I don't really care what button is pressed to do this.

    The way I did it was using an event listener that looks out for a submit event on the form and assigns an event handler function that checks to see if the textfield in the form is empty or not. If it is, it prevents submission (returns false). Otherwise, it allows the form to be submitted.

    In other words:

    HTML Code:
    <script type="text/javascript">
     
    function validationFunc() {
     
       if(document.formName.textFieldName.value == ""){
       alert("Please enter value");
       return false;
       }
    }
     
    var formName = document.getElementById("formName");
    formName.addEventListener('submit', validationFunc, false);
     
    </script>
    These are the basic components for the functionality you want. I hope you have the code to make this cross-browser compatible. You should also add the listener once the window has fully loaded. I don't have my actual code on the computer I'm using at the mo, which is why I'm not giving my actual code.

    If you need it, I'll arrange that for you...

    All the best!

  12. #12
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by brothercake View Post
    Nice.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •