Computer >> Máy Tính >  >> Lập trình >> Javascript

Cảnh báo về những thay đổi chưa được lưu trong biểu mẫu trong JavaScript

Sau đây là mã để hiển thị cảnh báo về những thay đổi chưa được lưu của biểu mẫu trong JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   input {
      margin: 10px;
   }
</style>
</head>
<body onbeforeunload="return pageUnload()">
<h1>Alert for unsaved changes in form</h1>
<form>
Username <input type="text" />
<br />
Password <input type="password" /><br />
<button type="submit">SUBMIT</button>
</form>
<br />
<script>
   function pageUnload() {
      return "The data on this page will be lost if you leave";
   }
</script>
</body>
</html>

Đầu ra

Cảnh báo về những thay đổi chưa được lưu trong biểu mẫu trong JavaScript

Nếu chúng ta nhấp vào nút tải lại thì cảnh báo sau sẽ được hiển thị -

Cảnh báo về những thay đổi chưa được lưu trong biểu mẫu trong JavaScript