Hướng dẫn input javascript - đầu vào javascript

Trong bài này mình sẽ hướng dẫn cách gán giá trị cho thẻ input trong javascript bằng cách sử dung thuộc tính

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

0.

Nội dung chính ShowShow

• 1. Dùng thuộc tính value gán giá trị cho thẻ input bằng js
• 2. Dùng phương thức setAttribute gán giá trị cho thẻ input bằng js
• Sự kiện input trong JavaScript là gì
• Bắt sự kiện input trong JavaScript
• Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Element
• Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM
• Phương pháp 3: Sử dụng phương thức addEventListener
• Ví dụ bắt sự kiện input trong JavaScript
• Tổng kết

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là sử dụng thuộc tính

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

0, thứ hai là sử dụng phương thức setAttribute javascript. Bài này mình chỉ sử dụng ngôn ngữ javascript thuần thôi nhé, không có sử dụng thư viện jQuery.setAttribute javascript. Bài này mình chỉ sử dụng ngôn ngữ javascript thuần thôi nhé, không có sử dụng thư viện jQuery.

1. Dùng thuộc tính value gán giá trị cho thẻ input bằng js

2. Dùng phương thức setAttribute gán giá trị cho thẻ input bằng js

Sự kiện input trong JavaScript là gì

document.getElementById('id').value = "value";

Bắt sự kiện input trong JavaScript

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Element: Thiết lập giá trị cho thẻ input textbox khi click vào button.

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Gán giá trị

2. Dùng phương thức setAttribute gán giá trị cho thẻ input bằng js

Sự kiện input trong JavaScript là gì

Bắt sự kiện input trong JavaScript

document.getElementById('domain').setAttribute('value', domain);

Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Element: Viết lại ví dụ ở phần 1 bằng cách sử dụng phương thức setAttribute.

Gán giá trị

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Phương pháp 3: Sử dụng phương thức addEventListenersự kiện input trong JavaScript. Bạn sẽ biết khái niệm cũng như cách bắt sự kiện input trong JavaScript sau bài học này.

Ví dụ bắt sự kiện input trong JavaScript

• Tổng kết
• Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
• Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là sử dụng thuộc tính

  var obj = document.getElementsByTagName('name');
  obj[0].value = "value"

  0, thứ hai là sử dụng phương thức setAttribute javascript. Bài này mình chỉ sử dụng ngôn ngữ javascript thuần thôi nhé, không có sử dụng thư viện jQuery.

Sự kiện input trong JavaScript là gì

Bắt sự kiện input trong JavaScript xảy ra khi dữ liệu được nhập vào form hoặc textarea, hoặc khi giá trị trong mene list được thay đổi bởi thao tác của người dùng. Sự kiện này phát sinh trên các Element Object trong JavaScript.

Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Element
Loại sự kiện: Event
Khả năng Bubbling: Có
Khả năng Cancel: Không

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Bắt sự kiện input trong JavaScript

Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Elementbắt sự kiện input trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện input xảy ra, và phải đăng ký trình xử lý sự kiện này vào Element cần quan sát.

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Phương pháp 1: Sử dụng thuộc tính oninput để đăng ký trực tiếp trình xử lý sự kiện vào Element

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Phương pháp 3: Sử dụng phương thức addEventListener

<label>Tên：<input type="text" oninput="inputinput()">label>

<script>
function inputinput(){
    console.log('input');
}
script>

Ví dụ bắt sự kiện input trong JavaScript

Phương pháp 2: Sử dụng thuộc tính oninput để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Phương pháp 3: Sử dụng phương thức addEventListener

Phương pháp 3: Sử dụng phương thức addEventListener

<label>Tên：<input type="text" id="nametext">label>

<script>
function inputinput(){
    console.log('input');
}

let text = document.getElementById('nametext');
text.oninput = inputinput;
script>

Ví dụ bắt sự kiện input trong JavaScript

• Tổng kết

Phương pháp 3: Sử dụng phương thức addEventListener

Ví dụ bắt sự kiện input trong JavaScript

Phương pháp 3: Sử dụng phương thức addEventListener

<label>Tên：<input type="text" id="nametext">label>

<script>
function inputinput(){
    console.log('input');
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputinput);
script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

4 từ DOM. Sau đó dùng phương thức addEventListener của Element đó để đăng ký trình xử lý sự kiện

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

7 tương ứng với tên sự kiên

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

3, nhằm giúp bắt sự kiện input khi nó xảy ra.

• Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với sự kiện input, một InputEvent Object kế thừa từ Event Object sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng InputEvent này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng InputEvent được trả về này.

<label>Tên：<input type="text" id="nametext">label>

<script>
function inputinput(event){
    console.log(event);
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputinput);
script>

Ví dụ bắt sự kiện input trong JavaScript

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách bắt sự kiện input trong JavaScript như sau. Trong ví dụ này chúng ta sử dụng tới phương pháp 3: Sử dụng phương thức addEventListener để bắt sự kiện input. Các phương pháp khác cũng tiến hành tương tự.

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sampletitle>
head>
<body>

<p>Ví dụ sử dụng sự kiện inputp>

<p>
<label>Họ tên：<input type="text" id="nametext">label>
p>

<p>
<label>Địa điểm：
    <select id="address">
    <option value="">Chọn địa điểmoption>
    <option value="hanoi">Hà Nộioption>
    <option value="tphcm">Tp.HCMoption>
    <option value="tokyo">Tokyooption>
    select>
label>
p>

<p>
<input type="radio" id="sales" name="div" value="sales" checked>
<label for="sales">Kinh doanhlabel><br>
<input type="radio" id="develop" name="div" value="develop">
<label for="develop">Devlabel><br>
<input type="radio" id="human" name="div" value="human">
<label for="human">Nhân sựlabel><br>
p>

<script>
function inputChange(event){
    console.log(event.currentTarget.value);
}

let text = document.getElementById('nametext');
text.addEventListener('input', inputChange);

let address = document.getElementById('address');
address.addEventListener('input', inputChange);

let radiosales = document.getElementById('sales');
radiosales.addEventListener('input', inputChange);

let radiodevelop = document.getElementById('develop');
radiodevelop.addEventListener('input', inputChange);

let radiohuman = document.getElementById('human');
radiohuman.addEventListener('input', inputChange);
script>

body>
html>

Với mã lệnh này, chúng ta đã tạo các Element để quan sát các hành động thay đổi giá trị từ người dùng như thẻ

var obj = document.getElementsByTagName('name');
obj[0].value = "value"

3 (để nhập text), thẻ

Gán giá trị

0 (để chọn nhiều các option), hay là thẻ

Gán giá trị

1 (để lựa chọn một option).

Với mỗi Element này, chúng ta đều có đăng ký trình xử lý sự kiện

Gán giá trị

2 giúp bắt sự kiện input khi nó xảy ra.

Do đó mỗi khi chúng ta thực hiện một hành động thay đổi các Element trên, thì nội dung hành động đó đều được lấy và và hiện ra trên màn hình.

Vi dụ như khi thay đổi lựa chọn trong menu trong thẻ select hoặc thẻ radio chẳng hạn.

Lưu ý khi nhập liệu vào trong thẻ input, sự kiện sẽ xảy ra trong mỗi lần ký tự được nhập vào, do đó các ký tự được nhập sẽ được lấy và in ra màn hình như sau:

Sự kiện input cũng xảy ra khi chúng ta xoá ký tự đã nhập:

Đây chính là sự khác biệt lớn nhất so với sự kiện rất giống với input đó là sự kiện change trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện input trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.bắt sự kiện input trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> học javascript - lập trình javascript cơ bản>>15. sự kiện trong javascript>> học javascript - lập trình javascript cơ bản>>15. sự kiện trong javascript

Bài sau

Sự kiện change trong JavaScript (khi thay đổi form hoặc menu lựa chọn)

Bài tiếp

Sự kiện copy, cut và paste trong JavaScript