VirtualMV/JavaScript/Forms/Events

From WikiEducator
Jump to: navigation, search




Overview

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)

EventComment
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
<html>
<head>
<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 += 
    strInput_with_return;
}
function fnMouse(){
  window.document.frmTest.txtInputMouse.value += ">";
}
</script>
</head>
<body>
<form name="frmTest">
<p>Enter some text <input type="text" name="txtInput" 
  onFocus="fnWriteIt('focus');" onBlur="fnWriteIt('blur');"
  onChange="fnWriteIt('change');"
</p>
<p>Move mouse over this <input type="text" name="txtInputMouse"
  onMouseOver="fnMouse()";>
</p>  
<textarea name="txtComment" rows="5" cols="20" ></textarea>
</body>
</html>

Example :Click here to run js5_02.

mouseover (js5_03)

<html>
<head>
<title>Mouseover (js5_03)</title>
</head>
<body>
<form name="frmMethod">
<input type="text" name="method_text" size=40 value="Use the fork, Luke, use the fork..">
</form>
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="window.document.frmMethod.method_text.select();">select</a><br />
</body>
</html>

Notes:

  • 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 http://wikieducator.org/VirtualMV/JavaScript/Forms/Events    (zotero)