Jag råkade i en situation där jag ville byta färg på ramen på en textruta, när den fick fokus. Min första lösning var denna:
<input type="text" id="txt" onfocus="this.style.borderColor:'Red';" onblur="this.style.borderColor:'';" />
Det fungerar alldeles utmärkt, men jag ville ju gärna göra en smartare och mer flexibel lösning. Det resulterade i följande javascript:
function setBorderByTagName(tagName, focusClassName, blurClassName)
{
if (!document.getElementsByTagName) return;
var textboxes = document.getElementsByTagName(tagName);
for (var i=0; i<textboxes.length; i++) {
var textbox = textboxes[i];
if (textbox.getAttribute("rel"))
{
if (textbox.getAttribute("rel").indexOf("border")!=-1)
{
textbox.onfocus = function(){
this.className = focusClassName;
return false;
}
textbox.onblur = function(){
this.className = blurClassName;
return false;
}
}
}
}
}
window.onload = setBorderByTagName("input", "focusClass", "blurClass");
Sedan är det bara att markera mina textrutor med rel="border, så här:
<input type="text" id="txt" rel="border" />
Happy coding!
2e8d5072-80db-49c1-9279-e216638ed19c|0|.0