Form表单回车刷新问题

症状：

　　当一个form表单内只有一个文本输入框时，当我们按下回车键会自动刷新页面内容，现象代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>测试</title>
    </head>
    <body>
        <form>
            <label for="title">ToDoList</label>
            <input type="text" id="content" placeholder="添加ToDo" title="请输入此字段" />
        </form>
        <a href="#"></a>
    </body>
    <script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $("#content").keydown(function(e){
                if (e.keyCode == 13){
                    $("a").text($("#content").val());
                    console.log($("#content").val());
                }
            })        
        })    
    </script>
</html>

药一：

　　在可以不用表单Form的情况下去掉form标签。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>测试</title>
 7     </head>
 8     <body>
 9         <label for="title">ToDoList</label>
10         <input type="text" id="content" placeholder="添加ToDo" title="请输入此字段" />
11         <br>
12         <a href="#"></a>
13     </body>
14     <script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
15     <script type="text/javascript">
16         $(function(){
17             $("#content").keydown(function(e){
18                 if (e.keyCode == 13){
19                     $("a").text($("#content").val());
20                     console.log($("#content").val());
21                 }
22             })        
23         })    
24     </script>
25 </html>

View Code

药二：

　　为form添加属性onsubmit："return false;"。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>测试</title>
 7     </head>
 8     <body>
 9         <form onsubmit="return false">
10             <label for="title">ToDoList</label>
11             <input type="text" id="content" placeholder="添加ToDo" title="请输入此字段" />
12         </form>
13         <a href="#"></a>
14     </body>
15     <script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
16     <script type="text/javascript">
17         $(function(){
18             $("#content").keydown(function(e){
19                 if (e.keyCode == 13){
20                     $("a").text($("#content").val());
21                     console.log($("#content").val());
22                 }
23             })        
24         })    
25     </script>
26 </html>

View Code

药三：

　　给Form表单添加一个隐藏输入框：<input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>测试</title>
 7     </head>
 8     <body>
 9         <form>
10             <label for="title">ToDoList</label>
11             <input type="text" id="content" placeholder="添加ToDo" title="请输入此字段" />
12             <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />
13         </form>
14         <a href="#"></a>
15     </body>
16     <script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
17     <script type="text/javascript">
18         $(function(){
19             $("#content").keydown(function(e){
20                 if (e.keyCode == 13){
21                     $("a").text($("#content").val());
22                     console.log($("#content").val());
23                 }
24             })        
25         })    
26     </script>
27 </html>

View Code