Change Style Of Button When Trigger Enter Key
I'm a beginner at HTML/CSS and JavaScript. 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
Solution 1:
You can add class on click enter and use class name in css..
EDIT!
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();
}
});
functionmypassword(){
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><inputid='password'class='pass'onfocus="handle1()"class='inc1'type="password"name="Password"placeholder='Password'value=""><buttonid='buttonpw'onclick="mypassword()">Sign In</button></html>Solution 2:
Add this inside if - document.getElementById("buttonpw").setAttribute("style", "color: #000;background: #fff;");
Like this:
if (event.keyCode === 13) {
document.getElementById("buttonpw").setAttribute("style", "color: #000;
background: #fff;");
document.getElementById("buttonpw").click();
}
Post a Comment for "Change Style Of Button When Trigger Enter Key"