输入类型按钮更改焦点输入按下答案

【问题标题】：input type button to change focus on enter press输入类型按钮更改焦点输入按下
【发布时间】：2024-01-15 22:35:01
【问题描述】：

我有一个红色的输入类型按钮。悬停时，我使用 CSS 将按钮的颜色更改为蓝色。如果使用选项卡按钮并到达输入按钮，它应该变为绿色。我在 CSS 中做了这个，但是当我按下回车键时它仍然保持绿色，但我希望它再次回到最初的红色。基本上，我想在按下回车后移除焦点。

我试过这个：

<div style="position: absolute; margin: 0; left: 0; bottom: 0"> <input id=" car" class="button calculator large top-right-border transition" type="submit" /> </div>

【问题讨论】：

请让我们知道您的一些代码制作小提琴
@abhi 无论您尝试过什么，都不要在 cmets.write 中写有问题的内容。否则你会在这里投反对票。
谁能回答我是新来的

标签： javascript jquery html css

【解决方案1】：

在您的 CSS 文件中

#car { background-color: red; }
#car:focus { background-color: green; }

使用jQuery，在文档就绪函数中，为输入的点击事件添加一个处理程序。即：

$(function() {
     $('#car').click(function() { 
         // Unfocus from the input when it's clicked
         $(this).blur();
     });
});

这将使按钮失去焦点，将 css 返回到“非焦点”类

【讨论】：

是的，我已经尝试过了，我希望当您按下按钮上的 Enter 键时，它应该恢复到原来的颜色
我希望当我聚焦并按下回车键时，它应该将其颜色变回原来的颜色，即从绿色变为红色
是的 jquery javascript html 和 css 任何你想要的

【解决方案2】：

我想知道这是否适合你 - FIDDLE。

var $mybutton = $('#mybutton');

$mybutton.on('focus', function(){
                                 $mybutton.css('background-color', 'green');
                                 });

$mybutton.on('blur', function(){
                                $mybutton.css('background-color', 'red');
                                });

$mybutton.hover( 
                function(){
                           $mybutton.css('background-color', 'blue');
                           },
                function(){
                           $mybutton.css('background-color', 'red');
                           }
);

或者只是 CSS：

#mybutton {
    background-color: red;
    color: white;
}
#mybutton:hover {
    background-color: blue;
    color: white;
}
#mybutton:focus {
    background-color: green;
    color: white;
}

【讨论】：