javascript - 当我按下Enter键时，一切都会变回原位(javascript和html)

这是一个小提琴：

DEMO

这是我的代码：

<!Doctype HTML>

<html>
<head>
    <meta charset="utf-8" />
    <title>Add Players</title>
    <style>
        body{
            background: #414141;
        }

        #players{
            background: #87828A;
            padding: 20px;
            width: 400px;
            border-radius: 20px;
        }

        .player{
            margin-bottom: 10px;
        }

        .playersquare{
            display: block;
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .score{
            float: right;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        var players = {
            playerCount : 1,
            player1 : {
                active: false,
                name : '',
                score : 0,
            },
            player2 : {
                active: false,
                name : '',
                score : 0,
            },
            player3 : {
                active: false,
                name : '',
                score : 0,
            },
            player4 : {
                active: false,
                name : '',
                score : 0,
            },
        }

        function addPlayer(){
            var name = document.getElementById('playerName').value

            if (name == ''){
                alert('You have not entered anything in the name box!')
            }
            else if(players.playerCount <= 4){
                var curPlayer = 'player' + players.playerCount
                players[curPlayer].name = name;
                players[curPlayer].active = true;
                players.playerCount++
            }

            updatePlayers()
        }

        function updatePlayers(){
            for (var i = 1; i <= 4; i++){
                if (players['player' + i].active){
                    $('#player' + i).fadeIn('slow')
                }
                else{
                    $('#player' + i).fadeOut('slow')
                }

                document.getElementById('player'+i+'name').innerHTML = players['player' + i].name
                document.getElementById('player'+i+'score').innerHTML = players['player' + i].score
            }
        }
    </script>
</head>

<body>
    <div id="players" style="float: left;">

        <div class="player" id="player1" style="display: none">
            <div class="playersquare" style="background: green"></div>
            <span class="playerName" id="player1name">Player</span>
            <span class="score" id="player1score">0</span>
        </div>

        <div class="player" id="player2" style="display: none">
            <div class="playersquare" style="background: red"></div>
            <span class="playerName" id="player2name">Player</span>
            <span class="score" id="player2score">0</span>
        </div>

        <div class="player" id="player3" style="display: none">
            <div class="playersquare" style="background: blue"></div>
            <span class="playerName" id="player3name">Player</span>
            <span class="score" id="player3score">0</span>
        </div>

        <div class="player" id="player4" style="display: none">
            <div class="playersquare" style="background: yellow"></div>
            <span class="playerName" id="player4name">Player</span>
            <span class="score" id="player4score">0</span>
        </div>
    </div>

    <form action="" method="">
        <input type="text" id="playerName"/>
        <input type="button" value="add" onclick="addPlayer()"/>
    </form>
</body>

</html>

我不知道为什么，但是如果我添加了一些播放器，然后又添加了一个播放器，但是在选中文本框时按回车键，一切都会消失。这是为什么？

我还是JS的新手，所以我什至不知道从哪里开始寻找答案

最佳答案

当您单击输入文本字段时，父form操作属性将被触发，并且由于actions=""为空，除非您松开所在页面，否则什么也不会发生。

您可以执行以下操作来解决此问题：

将此onSubmit="return false;"添加到表单标签中，如下所示：

<form action="" method="" onSubmit="return false;">

但是，如果您想在onSubmit上执行其他操作，但又不想执行Enter键，请使用以下脚本：

$('#formid').bind("keyup keypress", function(e) {
    var code = e.keyCode || e.which;
    if (code  == 13) {
    e.preventDefault();
        return false;
    }
});

关于javascript - 当我按下Enter键时，一切都会变回原位(javascript和html)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23838415/