Event in JavaScript
20:56
-
onfocus và onblur thường
được dùng với các đối tượng trong form.
- onfocus nghĩa là đối
tượng đó đang được trỏ chuột vào.
- Sự
kiện onfocus xảy ra khi một thành
phần trong form như textbox, checkbox, radio, dropdownlist không được focus
nhận được click chuột từ người dùng.
- Sự
kiện onblur xảy ra khi các thành
phần đó mất focus như click chuột vào một thành phần khác.
Example 1.
<!DOCTYPE html>
<html>
<head>
<title>Event
</title>
<script
type="text/javascript">
function
validateRequiredField(controlId){
var control =
document.getElementById(controlId);
control.style.color =
"white";
if
(control.value =="") {
control.style.background =
"red";
} else {
control.style.background =
"green";
}
}
</script>
</head>
<body>
<label>First
Name</label><input type="text" id="txtfirstName"
onkeyup="validateRequiredField('txtfirstName')"
onblur="validateRequiredField('txtfirstName')"><br/><br/>
<label>Last
Name</label><input type="text" id="txtlastName"
onkeyup="validateRequiredField('txtlastName')"
onblur="validateRequiredField('txtlastName')">
</body>
</html>
 |
|
|
 |
| After fill out form |
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
<meta charset="utf-8" />
</head>
<body>
<form>
Tên:
<input type="text" id="txtDemo" value="Nhập vào tên" />
</form>
<script>
var txtDemo = document.getElementById("txtDemo");
txtDemo.onfocus = function() {
var textBoxValue = txtDemo.value;
if (textBoxValue === "Nhập vào tên") {
txtDemo.value = "";
}
};
txtDemo.onblur = function() {
var textBoxValue = txtDemo.value;
if (textBoxValue === "") {
txtDemo.value = "Nhập vào tên";
}
};
</script>
</body>
</html>
 |
| Sau khi chạy |
 |
| Khi kích chuột vào |
Example 3.1:
<html>
<head>
<title>Event in JavaScript </title>
<script type="text/javascript">
function changeColorMouseOver(){
var control = document.getElementById("clickMe");
control.style.background = "red";
control.style.color = "yellow";
}
function changeColorMouseOut(){
var control = document.getElementById("clickMe");
control.style.background = "black";
control.style.color = "white";
}
</script>
</head>
<body>
<button id="clickMe" onmouseout="changeColorMouseOut()" onmouseover="changeColorMouseOver()" >Click Me!</button>
</body>
</html>
 |
| Sau khi run |
 |
| Đưa chuột vào |
 |
|
Đưa chuột ra ngoài |
0 nhận xét