JavaScript - Hộp thoại
JavaScript hỗ trợ ba loại hộp thoại quan trọng. Các hộp thoại này có thể được sử dụng để nâng cao và cảnh báo, hoặc để xác nhận bất kỳ đầu vào nào hoặc để có một loại đầu vào từ người dùng. Ở đây chúng ta sẽ thảo luận về từng hộp thoại một.
Hộp thoại Cảnh báo
Hộp thoại cảnh báo chủ yếu được sử dụng để đưa ra thông báo cảnh báo cho người dùng. Ví dụ: nếu một trường nhập yêu cầu nhập một số văn bản nhưng người dùng không cung cấp bất kỳ đầu vào nào, thì như là một phần của xác thực, bạn có thể sử dụng hộp cảnh báo để đưa ra thông báo cảnh báo.
Tuy nhiên, hộp cảnh báo vẫn có thể được sử dụng cho các tin nhắn thân thiện hơn. Hộp cảnh báo chỉ đưa ra một nút "OK" để chọn và tiếp tục.
Thí dụ
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>Đầu ra
Hộp thoại xác nhận
Hộp thoại xác nhận chủ yếu được sử dụng để lấy sự đồng ý của người dùng về bất kỳ tùy chọn nào. Nó hiển thị một hộp thoại với hai nút:OK và Cancel.
Nếu người dùng nhấp vào nút OK, phương pháp cửa sổ confirm()sẽ trả về true. Nếu người dùng nhấp vào nút Hủy, thìconfirm()trả về false. Bạn có thể sử dụng hộp thoại xác nhận như sau.
Thí dụ
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>Đầu ra
Hộp thoại Nhắc nhở
Hộp thoại nhắc rất hữu ích khi bạn muốn bật lên một hộp văn bản để nhận thông tin nhập của người dùng. Do đó, nó cho phép bạn tương tác với người dùng. Người dùng cần điền vào trường và sau đó nhấp vào OK.
Hộp thoại này được hiển thị bằng phương pháp có tên prompt() trong đó nhận hai tham số: (i) một nhãn mà bạn muốn hiển thị trong hộp văn bản và (ii) một chuỗi mặc định để hiển thị trong hộp văn bản.
Hộp thoại này có hai nút: OK và Cancel. Nếu người dùng nhấp vào nút OK, phương pháp cửa sổprompt()sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấp vào nút Hủy, phương pháp cửa sổprompt() trả lại null.
Thí dụ
Ví dụ sau đây cho thấy cách sử dụng hộp thoại nhắc:
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>