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

HTML DOM InputEvent inputType Thuộc tính

Thuộc tính inputEvent inputType của HTML DOM trả về loại đầu vào của sự kiện được kích hoạt.

Cú pháp

Sau đây là cú pháp -

Trả lại ký tự đã nhập mới nhất trong trường văn bản -

event.inputType

Ví dụ

Hãy để chúng tôi xem một ví dụ cho InputEvent inputType tài sản -

<!DOCTYPE html>
<html>
<head>
<title>InputEvent inputType</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-inputType</legend>
<label>Action teller:
<input type="text" id="textSelect" oninput="getEventInputType(event)">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventInputType(InputEvent) {
      if(InputEvent.inputType === 'insertText')
         divDisplay.textContent = 'You are typing: '+textSelect.value;
      else if(InputEvent.inputType === 'deleteContentBackward')
         divDisplay.textContent = 'You are using backspace key';
      else if(InputEvent.inputType === 'deleteContentForward')
         divDisplay.textContent = 'You are using delete key';
      else
         divDisplay.textContent = 'You are sitting idle, do something';
   }
</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 -

HTML DOM InputEvent inputType Thuộc tính

Nhập vào trường văn bản -

HTML DOM InputEvent inputType Thuộc tính

Sử dụng phím xóa lùi trong trường văn bản -

HTML DOM InputEvent inputType Thuộc tính

Sử dụng phím xóa trong trường văn bản -

HTML DOM InputEvent inputType Thuộc tính