revision:
The attribute fires when a page is about to be printed or before the print dialogue box appears. The onbeforeprint attribute is often used together with the onafterprint attribute.
The onbeforeprint attribute is part of the <event attributes> and can be used on the following element:<body>.
<element onbeforeprint="script"></element>
script: the script to be run on onbeforeprint
Keyboard shortcuts, such as Ctrl+P sets the page to print.
codes:
<body onbeforeprint="myFunction()">
<h4>Try to print this document</h4>
<p class="spec">Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
</body>
<script>
function myFunction() {
alert("You are about to print this document!");
}
</script>
This attribute fires when the document is about to be unloaded. This event allows to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page. The default message that appears in the confirmation box, is different in different browsers.
However, the standard message is something like "Are you sure you want to leave this page?". You cannot remove this message. However, you can write a custom message together with the default message.
The "onbeforeunload attribute" is part of the event attributes and can be used on the following element:<body>.
<body onbeforeunload="script"></body>
This attribute contains single value script and it runs when onbeforeunload event called.
Close this window, press F5 or click on the link below to invoke the onbeforeunload event.
click here to go to my websitecodes:
<body onbeforeunload="return changeFunction()">
<p class="spec">Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
<a href="https://www.lwitters.com">click here to go to my website</a>
</body>
<script>
function changeFunction() {
return "You are leaving this page to go to my website. Do you want to do this?";
}
</script>
This attribute fires the moment an element loses focus. "Onblur" is most often used with form validation code (e.g. when the user leaves a form field).
The "onblur attribute" is the opposite of the "onfocus attribute".
The onblur attribute is part of the event attributes, and can be used on any HTML element.
<element onblur="script"></element>
script: the script to be run on onblur.
Enter your name:
When you leave the input field, a function is triggered which transforms the input text to upper case.
codes:
<p class="spec">Enter your name: <input type="text" name="fname" id="fname" onblur="changeFocus()"></p>
<p class="spec">When you leave the input field, a function is triggered which
transforms the input text to upper case.</p>
<script>
function changeFocus() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
codes:
<form style="margin-left:3vw;" name="onblur_example" action="">
Name : <input type="text" name="name" onblur="alert('name field has lost focus')"><br><br>
<label>Favorite sports </label>
<select name="favourite_sports" onblur="alert('favourite_sports has lost focus')">
<option value="Soccer">Soccer</option>
<option value="Hockey">Hockey</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
</select><br><br>
<label>Describe yourself in short : </label><br><textarea cols="20" rows="10" name="describe_ yourself"
onblur="alert('describe_ yourself has lost focus')"></textarea><br><br>
<button type="button" name="submit">Submit</button>
</form>