개체에서 촛점이 제거되고 onblur 이벤트기 발생된다.

인수/파라메터
object

필수적인 요소이며, 초점을 주고저하는 개체의 이름이나 개체 배열변수 대한 인수에 의한 참조이다.

blur() 메서드에는 다른 파라메터는 없다.

반환값

반환값은 없다.

구문 예제
document.formName.inputName.blur();
document.forms[0].elements[1].blur();
windowName.blur();
설명

blur() 메서드는 대부분의 form 개체와 윈도우(window) 개체에 적용되고, 해당 개체들은 focus() 메서드도 갖으며, Javascript에 의하여 해당 개체에 초점을 주거나 제거할 수 있다.

개체 위에서 마우스를 클릭하면 초점이 주어지고(onfocus), blur() 메서드의 사용하면 다른 개체를 클릭하는 것과 같은 효과를 준다.

특기

초점은 항상 한개의 개체에만 줄 수 있고 나머지는 모두 blur() 메서드를 사용한 것과 같은 상태가 된다.

blur() 메서드를 사용하면 초점이 제거되고, 초점은 바로 이전에 초점을 주었던 개체로 이동한다.

이 메서드로서 현재 초점을 받는 엘레멘트로 부터 초점이 사라지는데, 탭에 의한 항해의 다음 엘레멘트로 초점이 이동하지는 않는다.

IE5에서, blur 메서드에 노출되는 엘레멘트는 tabIndex 애트리뷰트가 있어야 한다.

적용
개체scriptIE

이 메서드는 (영문)DOM1(W3C Document Object Model Level 1)에서 정의되었다.


초점 정보 표시하는 곳

문서가 로딩되면 textAreaName 텍스트에리아에 초점이 오도록 하였다. 마우스를 다른 필드에 클릭하며 초점을 바꿔보라.

<FORM name="formName">
<TABLE cellpadding=3 width=100%>
<TR>
<TD><TEXTAREA name="textAreaName"
  onFocus="showArea1.innerHTML='focus';showFocus(this)"
  onBlur="showArea1.innerHTML='blur'">초점은 한개의
개체에만 줄 수 있다.</TEXTAREA></TD>
<TD id=showArea1></TD></TR>
<TR>
<TD><INPUT type="text" name="textName" value="나머지는 모두 blur 이다"
  onFocus="showArea2.innerHTML='focus';showFocus(this)"
  onBlur="showArea2.innerHTML='blur'"></INPUT></TD>
<TD id=showArea2></TD></TR>
<TR>
<TD><INPUT type="password" name="passwordName" value=""
  onFocus="showArea3.innerHTML='focus';showFocus(this)"
  onBlur="showArea3.innerHTML='blur'"></INPUT></TD>
<TD id=showArea3></TD></TR>
</TABLE>
</FORM>

<SCRIPT>
document.onload=document.formName.textAreaName.focus(); // 문서가 로딩되면 textAreaName에 초점이 오도록한다.

function showFocus(obj){ // 개체를 인수로 받아 기능함수를 수행한다.
  showFocus.innerHTML='초점은 <FONT color=blue><B>'+obj.name+'</B></FONT>에 왔다.'; // 초점 정보를 출력한다.
}
</SCRIPT>

<DIV id="showFocus" class=show style=width:400;text-align:center>초점 정보 표시하는 곳</DIV>