触发输入键时更改按钮样式答案

【问题标题】：Change style of button when trigger enter key触发输入键时更改按钮样式
【发布时间】：2018-07-05 10:33:43
【问题描述】：

我是 HTML/CSS 和 JavaScript 的初学者。

我想通过 ENTER 按键触发button。问题是当我悬停按钮或单击它时，它会更改背景颜色，而输入“ENTER”键不会。当我按下 ENTER 键时，我想更改按钮的背景颜色。

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>

【问题讨论】：

在按钮或文本字段上输入

标签： javascript html css

【解决方案1】：

您可以在点击进入时添加类并在 css 中使用类名..

编辑！

到您的评论更改样式然后显示警报使用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>

【讨论】：

告诉更多帮助
谢谢，但它只是在完成提醒后才改变，而不是按回车键。
所以把这些行放在点击函数中
你能告诉我更多细节吗:(？我只是一个初学者。
你创建onclick按钮功能吗？

【解决方案2】：

在if - document.getElementById("buttonpw").setAttribute("style", "color: #000;background: #fff;"); 中添加这个
像这样：

if (event.keyCode === 13) {
document.getElementById("buttonpw").setAttribute("style", "color: #000; 
background: #fff;");
document.getElementById("buttonpw").click();
}

【讨论】：

谢谢，但它只是在完成提醒后才改变，而不是按回车键。
在css中添加.button:active {color: #000; background: #fff;}