在按键过程中更改按钮的颜色 [英] Change color of button during keypress

问题描述

 < input type ='button'class ='button'> 
  

当鼠标点击或按下回车键时。

要改变鼠标点击时的颜色，我可以简单地使用下面的css

  .button：有效{
背景颜色：#FFF; 
} 
  

对于回车键，我尝试了以下jQuery代码：

$ p $ $（'。button'）。keypress（function（e）{
if（e.which == 13）{
$（this）.css（'background-color'，'＃FFF'）
}
}）;


但是这不起作用，现在背景在返回后保持白色。但是，我只希望背景在期间输入时出现白色。

解决方案

使用按键/键盘组合切换颜色：

  $（button）。keydown（function（e）{//设置键盘关闭时的颜色... if（e.which === 13 ）{$（this）.css（background-color，red）;}}）; $（button）。keyup（function（）{//当任何键被取消时移除颜色... $（this）.css（background-color，））;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script><按钮> ; Test< / button>  

I want to change the color of a

<input type='button' class='button'>

when it is clicked by a mouse or while pressing the enter key.

To change the color when clicked by mouse I can simply use the following css

.button:active{
   background-color:#FFF;
}

For the enter key, I tried the following jQuery code:

$('.button').keypress(function(e){
      if(e.which == 13){
          $(this).css('background-color','#FFF')
      }
  });

But this doesnt work, now the background remains white after hitting return. However, I only want the background to get white during the time someone hits enter. How can I achive this?

解决方案

Use a combination of keypress/keyup to toggle the color:

$("button").keydown(function(e) {
    // Sets the color when the key is down...
    if(e.which === 13) {
    	$(this).css("background-color", "red");
    }
});
$("button").keyup(function() {
    // Removes the color when any key is lifted...
    $(this).css("background-color", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>

这篇关于在按键过程中更改按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！