将焦点设置为选项卡上的按钮

【问题标题】：set focus to button on tab将焦点设置为选项卡上的按钮
【发布时间】：2012-01-26 09:07:05
【问题描述】：

您好，我正在尝试将焦点设置在一个按钮上。我遇到的问题是，当我为按钮添加背景图像时，焦点颜色不会显示在图像周围，但如果我删除图像，按钮效果很好。当它有焦点时如何在按钮周围放置边框并将其重置为模糊？

<html>
 <head>

 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>


<script type="text/javascript">

$(document).ready(function() { 
  $('button:button').focus(function(){ 
    $(this).css({'background-color' : 'red'}); 
  }); 
  $('button:button').blur(function(){ 
    $(this).css({'background-color' : 'lightgreen'}); 
  }); 
});
</script>


</head>
<body> 
   <button type='button' id='btnSubmit' style="background-image:     
    urlbuttonBackground.gif);"       >button</button>
</body>
</html>

【问题讨论】：

jQuery 1.3?那是相当古老的。

标签： jquery button focus highlighting blur

【解决方案1】：

您可以在 css 类中定义这些样式，然后在 focus 上应用该类并在 blur 上删除它。试试这个。

从button中移除内联样式

<button type='button' id='btnSubmit'>button</button>

Css（根据需要定义样式）

button{
    background: lightgreen;
}
.focusBg{
    background: ulr('urlbuttonBackground.gif');
    border: 1px solid red;
}

$(document).ready(function() { 
     //Since the button has an id, you can use id selector
     $('#btnSubmit').focus(function(){ 
          $(this).addClass('focusBg');
     }).blur(function(){ 
          $(this).removeClass('focusBg');
     }); 
});

【讨论】：