Mục lục
Hướng dẫn và ví dụ Javascript InputEvent
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
InputEvent là một interface đại diện cho các sự kiện xẩy ra khi người dùng nhập dữ liệu trên các phần tử có thể sửa đổi (editable element) chẳng hạn như <input>, <textarea> hoặc các phần tử với thuộc tính (attribute) contenteditable="true".
InputEvent là một interface con của UIEvent.
Các sự kiện:
| Event | Mô tả |
|---|---|
| input | Sự kiện xẩy ra khi một phần tử nhận được đầu vào từ người dùng. |
Các trình duyệt hỗ trợ InputEvent:
Ví dụ, các phần tử hỗ trợ sự kiện input:
inputevents-elements-example.html
<!DOCTYPE html>
<html>
<head>
<title>InputEvent Example</title>
<meta charset="UTF-8">
<style>
*[contenteditable='true'] {
height:30px;padding:5px;border:1px solid #ccd;
}
</style>
<script>
// Note: event.data is not supported in Firefox, IE
function inputHandler(evt) {
showLog(evt.data);
}
function showLog(text) {
var logDiv = document.getElementById("log-div");
logDiv.innerHTML = logDiv.innerHTML + " .. " + text;
}
</script>
</head>
<body>
<h3>InputEvent example</h3>
<p style="color:red">Note: event.data is not supported in Firefox, IE</p>
<h3>Input element</h3>
<input type="text" oninput ="inputHandler(event)"/>
<h3>Textarea element</h3>
<textarea oninput ="inputHandler(event)" rows="5" cols="30"></textarea>
<h3>Elements with contenteditable='true'</h3>
<div oninput ="inputHandler(event)" contenteditable="true"></div>
<p id="log-div"></p>
</body>
</html>
Events: input vs change
Bạn cũng có thể cân nhắc sử dụng sự kiện change vì nó khá giống với sự kiện input:
- Sự kiện change hỗ trợ phần tử <select>, nó xẩy ra khi người dùng thay đổi lựa chọn (option) trên <select>.
- Đối với các phần tử <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), <textarea>: Sự kiện input xẩy ra ngay sau khi giá trị phần tử thay đổi. Trong khi sự kiện change xẩy ra khi giá trị phần tử thay đổi và phần tử mất focus.
InputEvent là interface con của UIEvent nên nó thừa hưởng tất cả các phương thức, thuộc tính (property) từ UIEvent. Ngoài ra nó có thêm các phương thức và thuộc tính (property) riêng của nó.
Properties:
| Property | Mô tả |
|---|---|
| data | Trả về các ký tự được chèn vào. Đây có thể là một chuỗi trống nếu thay đổi không chèn vào văn bản (chẳng hạn như khi xóa các ký tự). |
| dataTransfer | Trả về một đối tượng DataTransfer chứa thông tin về dữ liệu richtext hoặc plaintext được thêm vào hoặc xóa khỏi nội dung của phần tử. |
| inputType | Trả về loại thay đổi, chẳng hạn như 'inserting', 'deleting', 'formatting', ... |
| isComposing | Trả về true/false cho biết nếu sự kiện này được kích hoạt sau sự kiện compositionstart và trước sự kiện compositionend. |
Các giá trị có thể của inputType:
- insertText
- insertReplacementText
- insertLineBreak
- insertParagraph
- insertOrderedList
- insertUnorderedList
- insertHorizontalRule
- insertFromYank
- insertFromDrop
- insertFromPaste
- insertTranspose
- insertCompositionText
- insertFromComposition
- insertLink
- deleteByComposition
- deleteCompositionText
- deleteWordBackward
- deleteWordForward
- deleteSoftLineBackward
- deleteSoftLineForward
- deleteEntireSoftLine
- deleteHardLineBackward
- deleteHardLineForward
- deleteByDrag
- deleteByCut
- deleteByContent
- deleteContentBackward
- deleteContentForward
- historyUndo
- historyRedo
- formatBold
- formatItalic
- formatUnderline
- formatStrikethrough
- formatSuperscript
- formatSubscript
- formatJustifyFull
- formatJustifyCenter
- formatJustifyRight
- formatJustifyLeft
- formatIndent
- formatOutdent
- formatRemove
- formatSetBlockTextDirection
- formatSetInlineTextDirection
- formatBackColor
- formatFontColor
- formatFontName
Methods:
| Method | Mô tả |
|---|---|
| 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 sự kiện này. |
Chú ý: Mặc dù InputEvent được hỗ trợ bởi tất cả các trình duyệt nhưng một vài thuộc tính (property) và phương thức của InputEvent không được hỗ trợ trong một vài trình duyệt, vì vậy bạn nên cân nhắc khi sử dụng chúng.
Ví dụ:
inputevents-properties-example.html
<!DOCTYPE html>
<html>
<head>
<title>InputEvent Example</title>
<meta charset="UTF-8">
<script>
// Note: event.data, event.inputType is not supported in Firefox, IE
function inputHandler(evt) {
showLog(evt.data +" - " + evt.inputType);
}
function showLog(text) {
var logDiv = document.getElementById("log-div");
logDiv.innerHTML = text;
}
</script>
</head>
<body>
<h3>InputEvent properties example</h3>
<p style="color:red">Note: event.data, event.inputType is not supported in Firefox, IE</p>
<input type="text" oninput ="inputHandler(event)"/>
<p id="log-div"></p>
</body>
</html>
*
