这是一个 fiddle :
<强> 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>
我不知道为什么，但如果我添加一些玩家，然后去添加另一个玩家，但在选择文本框时按 Enter 键，所有内容都会消失。这是为什么？
我对 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 - 当我按回车键时，一切都会变回来(javascript和html)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23838415/