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

分享于 

4分钟阅读

Web开发

  繁體

示例图像- focusbgcolor.jpg

介绍

当用户从一个元素中离开时,默认情况下浏览器只是在焦点元素周围绘制一个边框。 有时候很难注意到,如果我们想帮助用户找到这个,我们可以更改当前焦点的background 颜色。 它将帮助他们很容易地识别出。

我们 怎样 实现 这点?

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

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 设置任何颜色,该颜色将用于设置 background 颜色。 你可以使用RGB颜色代码或者颜色名称,如红色。蓝色。绿色。等等 我已经将红色指定为我的焦点 background 颜色。

setBKColor 将被分配给 onFocus 事件。 每当元素接收焦点时,浏览器将调用这里方法。 这种方法将原始 bkColor 存储在一个临时变量中,我们只将全局 bkColor 变量设置为元素颜色的当前 background。

reSetBKColor 将被分配给 onBlur 事件。 当元素失去焦点时,浏览器将调用这里方法。 在这种方法中,我们将温度 bkColor 设置为元素颜色的当前 background,它将重置为原始 background 颜色。

我们可以直接为每个HTML表单元素标记指定这些 javascript,或者编写一个全局事件处理程序来将事件附加到所有表单元素。

我给你两个方法。

添加到HTML标记:

<inputtype="text"onfocus="setBkColor(event);"onblur="reSetBKColor(event);"<inputtype="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);
 } elseif (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和标签,或者单击 inside 字段,那么你就会看到前面的元素重置为原始的,而焦点元素将更改为新的bkColor