Question

我有一个原始颜色为红色的按钮，我希望它在使用Tab键聚焦到绿色时改变颜色，当你按下输入时，颜色应该会变回红色。

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


 .button.calculator{
 background:red;
 }

.button.calculator:focus{
 background:green;
 }

Answer 1

您可以使用javascript来实现此目的。

代码

HTML：

<div id="parent">
<button id="submit" onClick="functiong()">
</div>

使用Javascript：

<script>
functiong() {
$("#parent").on('click', '#submit', function () {
     $("#submit").val("some value");
     $("#submit").attr("id", "some id");
     $("#submit").style.backgroundColor("#f47121");

   });
}
</script>

Answer 2

您可以使用jquery，不要将:focus用于css - 更改聚焦颜色不能用原始颜色覆盖。

<强> DEMO

<强> JAVASCRIPT

var toggleClasses = function(removeClass, addClass) {
    return function() {
        var elem = $(this);
        elem.removeClass(removeClass);
        elem.addClass(addClass);
    };
};

$('#btn')
    .focus(toggleClasses('my-btn-red', 'my-btn-green'))

    .click(toggleClasses('my-btn-green', 'my-btn-red'))

    .focusout(toggleClasses('my-btn-green', 'my-btn-red'));

<强> HTML

<button id="btn" class="my-btn-red">Button</button>

<强> CSS

.my-btn-red {
    background: red;
}

.my-btn-green {
    background: green
}

Answer 3

Html:
    <body>
      <button class ="hai  hello">submit</button>
    </body>

CSS :

    .hai, .hello {
            background: red
        }
    .hello:focus {
            background: green
        }
Javascript :

$('document').ready(function() {
            $(".hai").click(function() {
                $(this).removeClass('hello')
            });
            $(".hai").focus(function() {
                $(this).addClass('hello')

            })
        })

Answer 4

请使用javascript或jQuery，使用：focus实际上并不是正确的方法。

您可以使用javascript Char代码查找Enter键的代码，并可以触发事件。

DEMO

<强>的jQuery

$(document).ready(function(){
    $('.button.calculator').click(function(){
        $(this).addClass('success');
    });

});

$(window).keydown(function(event){
    if ( event.which == 13){                        
        event.preventDefault();
        $('.button.calculator').addClass('success');    
    }
});

<强> HTML

<div style="margin:0;">
     <input class="button calculator large top-right-border   transition" type="submit" />
</div>

<强> CSS

 .button.calculator{
     background:red;
 }

.button.calculator.success{
     background:green;
 }

Answer 5

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

<script>
$(function () {
  $('.button.calculator').click(function () {
    $(this).addClass('pressed');
  })
});
</script>

.button.calculator,
.button.calculator.pressed,
.button.calculator.pressed:focus {
  background:red;
}

.button.calculator:focus{
  background:green;
}

Answer 6

使用onFocus和onBlur属性（按下后Colar保持红色。）

这是JavaScript函数。

此致

按Enter键后更改按钮背景

6 个答案: