Suckerfish :focus

作者：Patrick Griffiths 和 Dan Webb。

:focus 伪类可用于为获得焦点的页面元素应用样式。因此，例如，如果您希望用户在使用输入框时更改其背景颜色，您可以简单地执行以下操作：


input:focus { background: orange; }

IE 完全不识别此功能，所以只需快速摆动 Suckerfish 的尾巴


sfFocus = function() {
	var sfEls = document.getElementsByTagName("INPUT");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onfocus=function() {
			this.className+=" sffocus";
		}
		sfEls[i].onblur=function() {
			this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

这会将 Suckerfish 应用于所有 input 元素，因此只需在 CSS 中稍作添加


input:focus, input.sffocus { background: orange; }

在 Focusland 中一切正常。

如果您想将此应用于多个元素，例如 input 和 textarea，您可以使用 Suckerfish Shoal 的变体，它不仅可以轻松地一次使用多个 Suckerfish 函数，还可以轻松地将任何给定函数应用于多个元素。

示例

如前所述，您可以使用此方法突出显示表单元素（HTML Dog 也采用了此方法），或者您可以使用它来帮助那些不使用指针设备而通过 Tab 键浏览链接的用户，方法是突出显示获得焦点的链接。