问题描述
我正在尝试创建一个函数，允许用户按键盘上的 Enter 键来验证密码字段。在键盘上按 Enter 后，当密码错误时，我不断收到找不到页面的消息。如果我点击密码框上的输入按钮，我的警报会弹出，但没有任何反应，正如预期的那样。我基本上希望通过单击键盘上的输入按钮获得相同的确切结果。我怎样才能让它正常工作？
下面是我目前正在尝试使用的 Pen 的链接。
https://codepen.io/Pacman0006/pen/LYbqQYa
//creates a funtion that validates password
function computerPassword() {
var val = document.getElementById('password').value;
if (val =="Joker") {
window.open("https://www.google.com");
//location.href="https://www.google.com";
}else{
//keep getting errors so I added this
//to open in same window when user inputs wrong after hitting enter
//window.open("https://www.bing.com","_parent");
alert("that is the wrong password");
}
}
var input = document.getElementById("password");
// Execute a function when the user releases a key on the keyboard; from W3Schools.com
input.addEventListener("keyup",function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action,if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("go").click();
}
});@import "compass/css3";
* { Box-sizing: border-Box; }
body {
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
color:white;
font-size:12px;
background:#333 url(/images/classy_fabric.png);
}
form {
background:#111;
width:300px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
Box-shadow: 0 5px 10px 5px rgba(0,0.2);
}
form:after {
content:"";
display:block;
position:absolute;
height:1px;
width:100px;
left:20%;
background:linear-gradient(left,#111,#444,#b6b6b8,#111);
top:0;
}
form:before {
content:"";
display:block;
position:absolute;
width:8px;
height:5px;
border-radius:50%;
left:34%;
top:-7px;
Box-shadow: 0 0 6px 4px #fff;
}
.inset {
padding:20px;
border-top:1px solid #19191a;
}
form h1 {
font-size:18px;
text-shadow:0 1px 0 black;
text-align:center;
padding:15px 0;
border-bottom:1px solid rgba(0,1);
position:relative;
}
form h1:after {
content:"";
display:block;
width:250px;
height:100px;
position:absolute;
top:0;
left:50px;
pointer-events:none;
transform:rotate(70deg);
background:linear-gradient(50deg,rgba(255,255,0.15),rgba(0,0));
}
label {
color:#666;
display:block;
padding-bottom:9px;
}
input[type=text],input[type=password] {
width:100%;
padding:8px 5px;
background:linear-gradient(#1f2124,#27292c);
border:1px solid #222;
Box-shadow:
0 1px 0 rgba(255,0.1);
border-radius:0.3em;
margin-bottom:20px;
}
label[for=remember]{
color:white;
display:inline-block;
padding-bottom:0;
padding-top:5px;
}
input[type=checkBox] {
display:inline-block;
vertical-align:top;
}
.p-container {
padding:0 20px 20px 20px;
}
.p-container:after {
clear:both;
display:table;
content:"";
}
.p-container span {
display:block;
float:left;
color:#0d93ff;
padding-top:8px;
}
input[type=submit] {
padding:5px 20px;
border:1px solid rgba(0,0.4);
text-shadow:0 -1px 0 rgba(0,0.4);
Box-shadow:
inset 0 1px 0 rgba(255,0.3),inset 0 10px 10px rgba(255,0.1);
border-radius:0.3em;
background:#0184ff;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:13px;
}
input[type=submit]:hover {
Box-shadow:
inset 0 1px 0 rgba(255,inset 0 -10px 10px rgba(255,0.1);
}
input[type=text]:hover,input[type=password]:hover,label:hover ~ input[type=text],label:hover ~ input[type=password] {
background:#27292c;
}<form>
<h1>Input Your Password</h1>
<div class="inset">
<p>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</p>
</div>
<p class="p-container">
<input type="button" name="go" id="go" value="Enter" onclick="computerPassword();">
</p>
</form>解决方法
您遇到了语法错误/缺少 from tkinter import *
myHeight=400
myWidth=800
mySpeed=10
def initialiserBalle(dx,dy,rayon,couleur):
b=[myWidth/2,myHeight/2,dx,rayon]
b.append(myCanvas.create_oval(myWidth/2-rayon,myHeight/2-rayon,\
myWidth/2+rayon,myHeight/2+rayon,\
width=2,fill=couleur))
return b
def initialiserRaquette(x,y,largeur,hauteur,couleur):
r=[x,hauteur]
r.append(myCanvas.create_rectangle(x-largeur/2,y-hauteur/2,\
x+largeur/2,y+hauteur/2,\
width=2,fill=couleur))
return r
def miseAJourBalle():
# calcul de la nouvelle position
newX=balle[0]+balle[2]
newY=balle[1]+balle[3]
hit1=raquette1[0]+raquette1[4]
hit2=raquette2[1]+raquette2[5]
# correction
if newX<0 or newX>=myWidth:
newX=balle[0]
balle[2]*=-1
if newY<0 or newY>=myHeight:
newY=balle[1]
balle[3]*=-1
# intersection avec les raquettes
elif newX<= hit1:
newX=balle[0]
balle[2]*=-1
# mise a jour des coordonnees
balle[0]=newX
balle[1]=newY
# mise a jour de l'element graphique
myCanvas.coords(balle[5],\
balle[0]-balle[4],balle[1]-balle[4],\
balle[0]+balle[4],balle[1]+balle[4])
def miseAJourRaquette(r):
newY=r[1]+r[3]
if newY-r[5]/2<0 or newY+r[5]/2>=myHeight:
newY=r[1]
r[3]=0
r[1]=newY
myCanvas.coords(r[6],\
r[0]-r[4]/2,r[1]-r[5]/2,\
r[0]+r[4]/2,r[1]+r[5]/2)
def animation():
miseAJourBalle()
miseAJourRaquette(raquette1)
miseAJourRaquette(raquette2)
myCanvas.after(mySpeed,animation)
def moveRaquettes(event):
if event.keysym == 'a':
raquette1[3]=-5
if event.keysym == 'q':
raquette1[3]=5
if event.keysym == 'Up':
raquette2[3]=-5
if event.keysym == 'Down':
raquette2[3]=5
def stopRaquettes(event):
if event.keysym == 'a' or event.keysym == 'q':
raquette1[3]=0
if event.keysym == 'Up' or event.keysym == 'Down':
raquette2[3]=0
mainWindow=Tk()
mainWindow.title('Pong')
mainWindow.geometry(str(myWidth)+'x'+str(myHeight))
myCanvas=Canvas(mainWindow,bg='dark grey',height=myHeight,width=myWidth)
myCanvas.pack(side=TOP)
balle=initialiserBalle(5,5,20,'red')
raquette1=initialiserRaquette(60,40,100,'green')
raquette2=initialiserRaquette(myWidth-60,'pink')
mainWindow.bind("<Key>",moveRaquettes)
mainWindow.bind("<KeyRelease>",stopRaquettes)
animation()
mainWindow.mainloop()
。试一试：
{好的，所以我想我找到了问题所在。 Lonny B 提到将表单发布到我无意做的服务器。然而，这让我想到，一个表单元素本质上可能会在没有我明确告诉它的情况下寻找这个服务器。不管是不是我都不完全确定，但我在我的 html 中将表单元素更改为 Div，现在它按预期工作。