Prevent form submission on Enter key press

前端未结

关注

 19  1934

I have a form with two text boxes, one select drop down and one radio button. When the enter key is pressed, I want

native js (fetch api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();

<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

0 讨论(0)

时光说笑

2020-11-22 04:52

A react js solution

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

0 讨论(0)

灰色年华

2020-11-22 04:53

Use event.preventDefault() inside user defined function

<form onsubmit="userFunction(event)"> ...

function userFunction(ev) 
{
    if(!event.target.send.checked) 
    {
        console.log('form NOT submit on "Enter" key')

        ev.preventDefault();
    }
}

Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
  <input placeholder="type and press Enter" /><br>
  <input type="checkbox" name="send" /> submit on enter
</form>

0 讨论(0)

长发绾君心

2020-11-22 04:55

Below code will add listener for ENTER key on entire page.

This can be very useful in screens with single Action button eg Login, Register, Submit etc.

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

Tested on all browsers.

0 讨论(0)

悲哀的现实

2020-11-22 04:55
```
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
```
Add this Code In Your HTML Page...it will disable ...Enter Button..
0 讨论(0)
发布评论:

提交评论
- 加载中...
终归单人心

2020-11-22 04:58
event.key === "Enter"

More recent and much cleaner: use event.key. No more arbitrary number codes!

NOTE: The old properties (.keyCode and .which) are Deprecated.
```
const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});
```
Modern style, with lambda and destructuring
```
node.addEventListener("keydown", ({key}) => {
    if (key === "Enter") // Handle press
})
```
Mozilla Docs

Supported Browsers
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 3 4 下一页

Prevent form submission on Enter key press

native js (fetch api)

event.key === "Enter"

Modern style, with lambda and destructuring