触发回车键时更改按钮样式 [英] Change style of button when trigger enter key
问题描述
我是 HTML/CSS 和 JavaScript 的初学者.
I'm a beginner at HTML/CSS and JavaScript.
我想制作一个由 ENTER 按键触发的 button.问题是，当我将按钮悬停或单击时，它会更改背景颜色，而输入ENTER"键不会.我想在按 ENTER 键时更改按钮的背景颜色.
I wanna make a button with being triggered by ENTER keypress. The problem is that when i hover the button or click at it, it changes the background color while entering "ENTER" key doesn't.
I want to change the background color of the button when I press the ENTER key.
document.getElementById("password").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("buttonpw").click();
}
});
function mypassword() {
var x = document.getElementById("password").value;
if (x === "SolitaryRJin") {
alert("It's not for You. Bye bye!!");
} else {
alert("It's not for You. Bye bye!!");
}
}button {
position: absolute;
z-index: 100;
width: 149px;
height: 43px;
border: 1px solid #fff;
background: #000;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
border-radius: 22px;
transition: 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
button:hover {
color: #000;
background: #fff;
}
button:focus {
outline-width: 0;
}<input id='password' class='pass' onfocus="" class='inc1' type="password" name="Password" placeholder='Password' value="">
<button id='buttonpw' onclick="mypassword()">Sign In</button>推荐答案
您可以在点击进入时添加类并在 css 中使用类名..
You can add class on click enter and use class name in css..
编辑！
在您的评论中更改样式，然后使用 setTimeout 显示警报:https://www.w3schools.com/Jsref/met_win_settimeout.asp
to your comment to change style then show alert use setTimeout:https://www.w3schools.com/Jsref/met_win_settimeout.asp
document.getElementById("password")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
var element =document.getElementById("buttonpw");
element.click();
}
});
function mypassword(){
setTimeout(function(){
alert('you did it!');
},500);
var element =document.getElementById("buttonpw");
element.classList.add("clicked");
}button {
position: absolute;
z-index: 100;
width: 149px;
height: 43px;
border: 1px solid #fff;
background: #000;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
border-radius: 22px;
transition: 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
button:hover, .clicked{
color: #000;
background: #fff;
}
button:focus {
outline-width: 0;
}<html>
<input id='password' class='pass' onfocus="handle1()" class='inc1' type="password" name="Password" placeholder='Password' value="">
<button id='buttonpw' onclick="mypassword()">Sign In</button>
</html>这篇关于触发回车键时更改按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
