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

Đối tượng HTML DOM InputEvent

Đối tượng InputEvent đại diện cho tất cả các sự kiện tương ứng với sự thay đổi nội dung của phần tử biểu mẫu.

Thuộc tính

Đây, “ InputEvent ”Có thể có các thuộc tính / phương thức sau -

Dữ liệu
Thuộc tính / Phương thức
Mô tả

Nó trả về chuỗi tương ứng với ký tự được chèn
dataTransfer
Nó trả về một đối tượng chứa thông tin về dữ liệu quan tâm / đã xóa
getTargetRanges ()
Trả về một mảng chứa các phạm vi mục tiêu sẽ bị ảnh hưởng bởi việc chèn / xóa.
inputType
Nó trả về kiểu đầu vào
isComposing
Nó trả về trạng thái của sự kiện

Ví dụ

Hãy để chúng tôi xem một ví dụ về dữ liệu InputEvent tài sản -

<!DOCTYPE html>
<html>
<head>
<title>InputEvent Data</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>InputEvent-Data</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Apple" oninput="getEventData(event)">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.data === 'A')
         divDisplay.textContent = 'Correct Answer';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhập bất kỳ thứ gì vào trường văn bản -

Đối tượng HTML DOM InputEvent

Sau khi nhập câu trả lời sai vào trường văn bản -

Đối tượng HTML DOM InputEvent

Sau khi nhập câu trả lời đúng vào trường văn bản -

Đối tượng HTML DOM InputEvent