按下Enter键时不刷新页面 [英] Don't refresh page when enter key is pressed

问题描述

输入表单时，输入键会触发页面刷新，我遇到了一些问题.

I'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.

如果按下Enter键并且在文本区域(#input)中没有输入文本，则以下代码不会刷新页面，但是如果按下Enter并且#input中有输入，或者光标会刷新页面在文本区域中.我不确定是什么触发了它，因为#submit是一个常规按钮.

The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.

<div id="forms" class="container">
            <form>
                Enter your verb here in plain (dictionary) form:
                <input type="text" class="input-sm" id="input"></input>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Hiragana" checked />Radio 1
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Romaji" />Radio 2
                    </label>
                </div>
                <input type="button" class="btn btn-default" id="submit" value="Submit">
                </input
            </form>
        </div>

我正在尝试用jQuery来解决问题，但是在这方面需要帮助.任何建议，将不胜感激！

I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!

推荐答案

您可以在正文末尾添加以下脚本

you can either add following script at the end of body

<script>
        $("form").submit(function (e) {
            e.preventDefault();
            alert("call some function here");
        });
</script>

或者您可以像这样放置表单标签

or you can just put your form tag like this

<form onsubmit="return false">

无论哪种方式，您都将不得不在输入中写入onClick ="SOMEFUNCTION()"

either way you will then have to write an onClick="SOMEFUNCTION()" to the input

另外一个/button标记也存在错误...删除该错误，改为使用

also there is an error with an extra /button tag...remove that and instead use

<input type="button" class="btn btn-default" id="submit" value="Conjugate" />

注意结尾的斜杠

这篇关于按下Enter键时不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！