使用tab键更改焦点颜色的按钮，并在按enter键时返回原始颜色

Button to change color on focus using tab key and back to original color on pressing enter

本文关键字：颜色 enter 原始 返回 按钮 tab 焦点 使用      更新时间：2023-09-26

我使用tab键到达我的按钮，然后当它进行焦点时，我希望它改变颜色，以便它显示您已经到达按钮，并且当您按下enter键时，它应该将其颜色更改回原来的

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

和CSS 

#vehicles:hover{
     background: red;
}
#vehicles:focus{
     background: red;
}
#vehicles{
     background: green;
}

按回车键时，我想让颜色变回绿色

使用:active不会让它永远变回绿色。您可能需要使用JavaScript来取消按钮的焦点。

<input id="vehicles" type="submit" onkeypress="if (event.which === 13) this.blur()" />

在input元素的id赋值中，你的左括号和vehicles之间有一个空格，所以你的CSS样式不适用于它。应该是

<input id="vehicles".../>

而不是

<input id=" vehicles".../>

我认为你应该用:active而不是:focus。它会给你所需的解决方案

<input id="vehicles" class="button calculator large top-right-border transition" type="submit" name="submit"   />

#vehicles:hover{
     background: red;
}
#vehicles:active{
     background: red;
}
#vehicles{
     background: green;
}

查找JSFIDDLE

这对你有用。使用jQuery实现对焦-散焦。更多信息请浏览

http://api.jquery.com/focusout/

希望有所帮助，

 <html><body>
<input type="submit" 
       id="vehicles" 
       style="background-color:red;" 
       onfocus ="change_color()"/>
    <script>
        function change_color()
        {
            document.getElementById("vehicles").style.backgroundColor="Blue";
        }
    </script>
    </body>
    </html>`
相关文章：