Làm thế nào để bạn tìm kiếm một giá trị trong html?

Có nhiều loại trường đầu vào và mặc dù việc lấy giá trị của chúng được thực hiện tương tự trong từng trường hợp, nhưng cần phải suy nghĩ một chút để thực hiện tốt

Lấy giá trị của một đầu vào văn bản

Đây là một ví dụ cơ bản. Nó tạo một trường nhập văn bản, sau đó in nội dung ra bàn điều khiển

HTML

JavaScript

function getVal() {
  const val = document.querySelector('input').value;
  console.log(val);
}

Giá trị của đầu vào sẽ được in ra bàn điều khiển khi hàm getVal() được gọi

Mọi đầu vào đều có thể nhận được một thuộc tính thiết lập “lời kêu gọi hành động” – nói cách khác, một sự kiện kích hoạt việc thực thi một chức năng

Trong ví dụ trên, chúng tôi sử dụng onblur sự kiện DOM để thực hiện các cuộc gọi đến chức năng xử lý sự kiện của chúng tôi

Mỗi loại đầu vào sẽ yêu cầu các sự kiện khác nhau để kích hoạt chức năng xử lý – đó là phần truy xuất đầu vào từ người dùng đòi hỏi một số suy nghĩ. Trên hết, nhiều sự kiện có thể được sử dụng với cùng một đầu vào. Hiểu thời điểm các sự kiện này được kích hoạt và cách chúng tương tác với trường nhập liệu của bạn là chìa khóa giúp trình xử lý sự kiện của bạn hoạt động bình thường

Sự kiện onblur kích hoạt hàm getVal() khi trường mất tiêu điểm (i. e. người dùng điều hướng ra khỏi trường)

Không phải mọi sự kiện đều phù hợp với mọi mục đích. Ví dụ: nếu bạn đang làm việc với đầu vào hỗ trợ cơ chế tìm kiếm và trình xử lý sự kiện sẽ được kích hoạt mỗi khi dữ liệu thay đổi, bạn sẽ muốn sử dụng sự kiện oninput. Với oninput, mọi ký tự mà người dùng nhập (hoặc xóa) sẽ kích hoạt hàm getVal(), khiến nội dung của trường được in ra bảng điều khiển. Ví dụ: nếu bạn đang gõ từ “dog”, bạn sẽ thấy “d”, sau đó là “do”, cuối cùng là “dog” trong đầu ra của bảng điều khiển

Cú pháp xử lý sự kiện và ghi chú

Làm việc đúng cách với các trình xử lý sự kiện đòi hỏi nỗ lực ở cả cấp độ DOM và cấp độ Tập lệnh

1. cấp độ DOM

a. Đảm bảo rằng phần tử DOM có thuộc tính sự kiện kích hoạt chức năng xử lý sự kiện của bạn

b. Đảm bảo rằng sự kiện DOM bạn đã chọn là lựa chọn phù hợp cho thông tin đầu vào của bạn

cú pháp

Để chỉ định trình xử lý sự kiện của bạn, hãy thêm nó làm thuộc tính trên phần tử bằng định dạng sau

DOMevent=”funcName()”

2. cấp độ kịch bản

Ở cấp độ tập lệnh, chỉ cần xác định chức năng xử lý của bạn

hàm funcName() {

const val = findHTMLelement. giá trị

Sử dụng val

}

Tìm một phần tử HTML

Trình xử lý sự kiện thường yêu cầu bạn tìm phần tử HTML đang được sửa đổi ở bước đầu tiên

Có một số cách để làm như vậy – chủ yếu bằng cách sử dụng các truy vấn DOM khác nhau

Trong ví dụ về trường nhập văn bản ở trên, chúng tôi đã sử dụng tài liệu. querySelector('input') để tìm trường đầu vào đang được sửa đổi. Truy vấn này trả về đầu vào đầu tiên. Nếu có nhiều trường nhập liệu, truy vấn đơn giản này sẽ không hoạt động tốt – bạn sẽ muốn sử dụng truy vấn DOM cụ thể hơn trong trường hợp đó

Đối với hầu hết các loại đầu vào,. thuộc tính giá trị sẽ hữu ích trong việc lấy giá trị của trường. Tuy nhiên, một số đầu vào yêu cầu các thuộc tính khác nhau – ví dụ: loại đầu vào hộp kiểm không sử dụng. thuộc tính giá trị (thêm về điều này bên dưới)

Kiểu đầu vào

Mỗi đầu vào có một loại. Loại này xác định phần tử đầu vào trông như thế nào khi nó được hiển thị trên trang, Nếu đầu vào thuộc loại văn bản, một trường văn bản sẽ được hiển thị trên trình duyệt. Nếu hộp kiểm đầu vào thuộc loại, hộp kiểm sẽ xuất hiện

Nhận giá trị của hộp kiểm loại đầu vào

Như đã đề cập ở trên, việc truy xuất giá trị của trường hộp kiểm hơi khác so với các loại trường nhập liệu khác. Lấy ví dụ sau, tạo một hộp kiểm trong cửa sổ trình duyệt và chỉ định một trình xử lý cho sự kiện DOM onchange

HTML

JavaScript

function getChecked() {
  const checkBox = document.getElementById('check1').checked;
  if (checkBox === true) {
    console.log(true);
    } else {
      console.log(false);
  }
}

Trong ví dụ trên, sự kiện DOM kích hoạt là onchange. Điều này có nghĩa là bất cứ khi nào có thay đổi đối với đầu vào, hàm xử lý getChecked được gọi. Đây là trình kích hoạt sự kiện được sử dụng thường xuyên cho các trường nhập liệu

Truy vấn DOM được thực hiện bằng tài liệu. getElementById(‘_id_‘), truy vấn tài liệu cho các phần tử có thuộc tính id phù hợp. Id của một phần tử là duy nhất. Tìm các phần tử theo Id đảm bảo rằng bạn sẽ chỉ nhận lại một phần tử duy nhất. Tuy nhiên, việc sử dụng id rất tốn kém – tốt hơn là tìm kiếm theo tên lớp

Để tìm kiếm theo tên lớp, hãy sử dụng tài liệu. getElementsByClassName(“_className_”)[idx]. Điều này sẽ truy xuất tất cả các phần tử có giá trị tên lớp được liên kết, vì vậy điều quan trọng là phải đảm bảo rằng chỉ tồn tại một phần tử có tên lớp được yêu cầu. Bộ chọn getElementsByClassName() trả về một mảng, nghĩa là bạn cần lấy trường đầu vào từ mảng được trả về – do đó [idx]

Để truy xuất giá trị của hộp kiểm, hãy sử dụng thuộc tính đã chọn. Thuộc tính được kiểm tra trả về đúng hoặc sai dựa trên nội dung của trường đầu vào

Làm thế nào có thể nhận được giá trị từ tìm kiếm trong HTML?

Thuộc tính giá trị tìm kiếm đầu vào HTML DOM được liên kết với phần tử đầu vào có type=”search” và thuộc tính value . Nó được sử dụng để trả về giá trị của thuộc tính giá trị trường tìm kiếm đầu vào hoặc để đặt nó.

Làm cách nào để tìm kiếm giá trị đầu vào trong JavaScript?

Chúng ta có thể lấy giá trị của trường nhập văn bản bằng nhiều phương thức khác nhau trong JavaScript. Có thuộc tính giá trị văn bản có thể đặt và trả về giá trị của thuộc tính giá trị của trường văn bản. Ngoài ra, chúng ta có thể sử dụng phương thức jquery val() bên trong tập lệnh để lấy hoặc đặt giá trị của trường nhập văn bản .