更改当前聚焦元素的背景颜色

• 下载源代码文件 - 0.81 KB

引言

当用户从某个元素上按下Tab键离开时，浏览器默认只会在焦点元素周围绘制一个边框。 有时候这很难注意到，如果我们想帮助用户轻松找到它，可以改变当前焦点元素的背景颜色。 这将帮助他们轻松识别焦点元素。

我们该怎么做呢？

我们需要一些 JavaScript 来设置和重置背景颜色。

var bkColor = "red";
function getEvent(e){
  if(window.event != null) {
    return event;
  }
  return e;
}
function setBKColor(e){
 e = getEvent(e);
 var src =  e.srcElement || e.target;
 if(src != null) {
   src.style.bkColor = src.style.backgroundColor;
   src.style.backgroundColor = bkColor;
 }
}
function reSetBKColor(e){
 e = getEvent(e);
 var src =  e.srcElement || e.target;
 if(src != null) {
   src.style.backgroundColor = src.style.bkColor;
 }
}

您可以为全局变量 bkColor 设置任何颜色，该颜色将用于设置背景颜色。 您可以使用 RGB 颜色代码或颜色名称，例如红色、蓝色、绿色等。 我已将红色设置为我的焦点背景颜色。

setBKColor 将被分配给 onFocus 事件。 每当元素获得焦点时，浏览器将调用此方法。 在该方法中，我们将原始 bkColor 存储在一个临时变量中，然后将全局 bkColor 变量设置为当前元素的背景颜色。

reSetBKColor 将被分配给 onBlur 事件。 每当元素失去焦点时，浏览器将调用此方法。 在该方法中，我们将临时 bkColor 设置为当前元素的背景颜色，并将其重置为原始背景颜色。

我们可以直接将这些 JavaScript 分配给每个 HTML 表单元素标签，或者编写一个全局事件处理程序来将事件附加到所有表单元素。

我将向您展示这两种方法。

添加到 HTML 标签

<input type="text" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"
<input type="radio" id= "rd1" onfocus="setBkColor(event);" onblur="reSetBKColor(event);"

如果您喜欢添加全局处理程序

<script language="javascript">
function attachEvent(name,element,callBack) {
    if (element.addEventListener) {
      element.addEventListener(name, callBack,false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, callBack);
    }
}

function setListner(eve,func) {
   var ele = document.forms[0].elements;
   for(var i = 0; i < ele.length;i++) {
    element = ele[i];
    if (element.type) {
      switch (element.type) {
        case 'checkbox':
        case 'radio':
        case 'password':
        case 'text':
        case 'textarea':
        case 'select-one':
        case 'select-multiple':
           attachEvent(eve,element,func);
       }
     }
  }
}
setListner("focus",setBKColor);
setListner("blur",reSetBKColor);
</script>

我们需要为 focus 和 blur 函数调用 setListner 函数。 它将循环遍历所有元素并将特定函数（第二个参数）附加到事件（第一个参数）。

现在，如果您启动 HTML 并从一个字段按下Tab键切换到另一个字段，或者单击字段内部，您将看到前一个元素的 bkColor 重置为原始 bkColor，并且焦点元素将更改为新的 bkColor。