마우스를 해당 입력창에 클릭하던가, Tab 으로 필드를 이동하여 해당 개체에 포커스를 주면(onfocus 기능함수에 의해 해당 개체의 값으로 해당 개체에 배경색을 변경시켜준다.
같은 방식으로 다른 필드로 이동하거나 필드 밖으로 포커스가 이동하면 포커스 상실(onblur)로 기능함수에 의해 원래의 배경색으로 환원한다.

<SCRIPT>
function paint(obj,color){
  obj.style.backgroundColor=color;
}
function hideit(obj){
  obj.style.backgroundColor='';
}
</SCRIPT>;

<FORM name="f3">입력칸에서 문자를 선택해 보라<BR>
<INPUT type="text" name="i1" onFocus="paint(this,this.value)" onBlur="hideit(this)" value="pink"><BR>
<INPUT type="text" name="i2" onFocus="paint(this,this.value)" onBlur="hideit(this)" value="yellow"><BR>
<INPUT type="text" name="i3" onFocus="paint(this,this.value)" onBlur="hideit(this)" value="aqua"><BR>
<INPUT type="text" name="i3" onFocus="paint(this,this.value)" onBlur="hideit(this)" value="lightgreen"><BR>
<INPUT type="button" name="i4" onFocus="paint(this,this.value)" onBlur="hideit(this)"  value="orange"><BR>
</FORM>

입력필드들과 다른 곳에 포커스를 이동시켜 보라.
또한 입력란1에 포커스를 주고 포커스 변경 클릭을 해 보라. Javascript에 의해 자동적으로 입력란2로 포커스가 이동한다.

<FORM name="testForm">
<INPUT type="text" name="input1" value="입력란 1"
  onFocus="show1.innerHTML='onfocus'"
  onBlur="show1.innerHTML='onblur'">
  <SPAN id=show1></SPAN><BR>
<INPUT type="text" name="input2" value="입력란 2"
  onFocus="show2.innerHTML='onfocus'"
  onBlur="show2.innerHTML='onblur'">
 <SPAN id=show2></SPAN><BR>
<INPUT type="button" value="포커스 변경 클릭"
  onClick=jsTest()> <! 이 단추를 클릭하면 실제적으로는 포커스가 이 단추로 오는데 기능함수로 변경시킨다.>
 <SPAN id=show3></SPAN><BR>
</FORM>

<SCRIPT>
testForm.input2.focus() // 최초에 에 포커스를 준다

function jsTest(){
  if (testForm.input1.focus) testForm.input2.focus(); // 포커스가 입력란 1에 있으면 입력란 2로 포서스를 이동시킨다.
}
</SCRIPT>