JavaScript Lesson 16: The onSelect Events and onChange Events

<Lesson 15> [Contents] <Lesson 17>

16.1 The onChange Event

The onChange event occurs when the users alter the input into form elements, such as a text box. In the following example, we shall show you how this event triggers a pop-up message when the user enters something into a textbox and alter its content.

Click on Example 16.1 to see the output.



When the user loads the web page that contains the script, a text box will appear at the top of the web page. When enters something into the textbox, alters it and then click outside the textbook, he will see a pop-up dialog then reads “You have changed the content”

16.2 The onSelect Event

The onSelect event occurs when the user selects text by dragging the mouse across a certain part of the text. We can write JavaScript code for this event. In Example 16.2, when the user types some characters into the text area and then select a part of the text, the selected will be shown to the user via a pop-up dialog.

Example 16.2

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>JavaScript Example 16.1: onChange</title>
</head>
<body>
<script>

function SelText()
{

yourtext = document.selection.createRange().text;

window.alert(“You text you have selected is: “+yourtext );
}

</script>
<Form>
<textarea rows=”5″ cols=”20” onSelect=(SelText(this.form))></textarea>
</form>

</body>

</html>

Please click on Example 16.2 to test the output.


<Lesson 15> [Contents] <Lesson 17>