Question

这是一个小提琴：

这是我的代码：

<!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>

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

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

Answer 1

当您点击输入时，文本字段form操作属性会被触发＆amp;由于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和html）时，一切都会改变

1 个答案: