From WikiEducator
Jump to: navigation, search


VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand how events are used in a Form

Form events (js5_02)

onFocusWhen you click on the document object
onBlurWhen the object loses focus
onChangeWhen you make a change AND lose focus
onMouseOverWhen you move the mouse over the document object
<title>Text Field Events (js5_02)</title>
<script type="text/javascript">
function fnWriteIt(strWord){
  var strInput_with_return = strWord + "\n";
  window.document.frmTest.txtComment.value += 
function fnMouse(){
  window.document.frmTest.txtInputMouse.value += ">";
<form name="frmTest">
<p>Enter some text <input type="text" name="txtInput" 
  onFocus="fnWriteIt('focus');" onBlur="fnWriteIt('blur');"
<p>Move mouse over this <input type="text" name="txtInputMouse"
<textarea name="txtComment" rows="5" cols="20" ></textarea>

Example :Click here to run js5_02.

mouseover (js5_03)

<title>Mouseover (js5_03)</title>
<form name="frmMethod">
<input type="text" name="method_text" size=40 value="Use the fork, Luke, use the fork..">
Mouseover to <br />
<a href="#" onMouseOver="window.document.frmMethod.method_text.focus();">get focus</a>
<a href="#" onMouseOver="window.document.frmMethod.method_text.blur();">lose focus</a>
<a href="#" onMouseOver=";">select</a><br />


  • When you mouse over
    • get focus the "edit" cursor appears at the start of the text box
    • lose focus the "edit" cursor disappears from the text box
  • If you mouse over select the text is highlighted and get/lose focus do not work. Click away from text box to deactivate the selection.

Example :Click here to run js5_03.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/Events. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2017, from    (zotero)