Hướng dẫn how do you get input value directly in javascript? - làm thế nào để bạn nhận được giá trị đầu vào trực tiếp trong javascript?

Các trường đầu vào cho phép chúng tôi nhận dữ liệu từ người dùng.

Có nhiều loại trường đầu vào, và trong khi nhận được giá trị của chúng được thực hiện tương tự trong mỗi trường hợp, nó đòi hỏi một số suy nghĩ phải làm tốt.input fields, and while getting their value is done similarly in each case, it requires some thought to do well.

Nhận giá trị của đầu vào văn bản

Đây là một ví dụ cơ bản. Nó tạo ra một trường đầu vào văn bản, sau đó in nội dung vào bảng điều khiểntext input field, then prints the contents to the console

HTML

JavaScript

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

Giá trị đầu vào sẽ được in vào bảng đ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 một cuộc gọi hành động của Cameron - nói cách khác, một sự kiện kích hoạt việc thực thi một hàm.

Trong ví dụ trên, chúng tôi sử dụng sự kiện DOM Onblur để 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.onblur to make calls to our event handler function.

Mỗi loại đầu vào sẽ yêu cầu các sự kiện khác nhau để kích hoạt hàm xử lý - đó là một phần của việc 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 khi 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 đầu vào của bạn, là chìa khóa để các trình xử lý sự kiện của bạn hoạt động đúng.handler function – that’s the part of retrieving input from the user that requires some thinking. On top of this, multiple events can be used with the same input. Understanding when these events are triggered, and how they interact with your input field, is the key to getting your event handlers working properly.

Sự kiện Onblur kích hoạt hàm getVal () một khi trường mất tiêu điểm (nghĩa là người dùng điều hướng ra khỏi trường).onblur event triggers the getVal() function once the field loses focus (i.e. the user navigates away from the field).

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 một đầu vào hỗ trợ cơ chế tìm kiếm và trình xử lý sự kiện nên đượ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à các loại người dùng (hoặc xóa) sẽ kích hoạt hàm getVal (), khiến nội dung của trường được in vào bảng điều khiển. Ví dụ: nếu bạn đang gõ từ chó con chó, bạn sẽ thấy là một người kháconinput event. With oninput, every character the user types (or deletes) will trigger the getVal() function, causing the field’s contents to be printed to the console. For example, if you were typing the word “dog”, you would see “d”, then “do”, then finally “dog” in the console output.

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

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

1. Cấp độ DOM:

một. Đả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. Hãy chắc chắn rằng sự kiện DOM mà bạn đã chọn là lựa chọn phù hợp cho đầ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:

funcName funcName () {

const val = findhtmlelement.value

Tận dụng Val

}

Tìm phần tử HTML

Trình xử lý sự kiện thường yêu cầu bạn tìm thấy phần tử HTML được sửa đổi là 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ụ trường đầu vào văn bản ở trên, chúng tôi đã sử dụng Document.QuerySelector (‘Đầu vào) để 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ó một số trường đầu vào, truy vấn đơn giản này sẽ không hoạt động tốt - bạn sẽ muốn sử dụng một truy vấn DOM cụ thể hơn trong trường hợp đó.returns the first input. If there are several input fields, this simple query will not work well – you’ll want to use a more specific DOM query in that case.

Đối với hầu hết các loại đầu vào, thuộc tính .Value sẽ chứng minh hữu ích trong việc lấy giá trị 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 .Value (nhiều hơn về điều này bên dưới)..value attribute will prove useful in getting the field’s value. Some inputs, however, require different attributes – for example, the checkbox input type does not use the .value attribute (more on this below).

Kiểu đầu vào

Mỗi đầu vào đều 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 được hiển thị trên trang, nếu đầu vào là loại văn bản, một trường văn bản được hiển thị trên trình duyệt. Nếu đầu vào của hộp kiểm Loại, hộp kiểm sẽ xuất hiện.text, a text field is shown on the browser. If the input is of type checkbox, a checkbox appears.

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 một chút so với các loại trường đầu vào khác. Lấy ví dụ sau, tạo hộp kiểm trong cửa sổ trình duyệt và gán một trình xử lý cho sự kiện DOM Onchange:checkbox field is slightly different from other input field types. Take the following example, which creates a checkbox in the browser window and assigns a handler to the DOM event onchange:

HTML

JavaScript

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

Giá trị đầu vào sẽ được in vào bảng điều khiển khi hàm getVal () được gọi.onchange. This means that whenever a change is made to the input, the handler function getChecked is called. This is a frequently used event trigger for input fields.

Mọi đầu vào đều có thể nhận được một thuộc tính thiết lập một cuộc gọi hành động của Cameron - nói cách khác, một sự kiện kích hoạt việc thực thi một hàm.id attribute. An element’s Id is unique. Finding elements by Id ensures that you will only get a single element back. Using ids is costly, though – it is better to search by classname.

Trong ví dụ trên, chúng tôi sử dụng sự kiện DOM Onblur để 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 hàm xử lý - đó là một phần của việc 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 khi 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 đầu vào của bạn, là chìa khóa để các trình xử lý sự kiện của bạn hoạt động đúng.checkbox, use the checked attribute. The checked attribute returns true or false based on the contents of the input field.

Những bài viết liên quan:

JavaScript - & nbsp; Cách đặt lớp phần tử HTML

JavaScript - & nbsp; Cách sử dụng thuộc tính tùy chọn đã chọn

JavaScript - Cách chuyển hướng đến một URL khác

Làm thế nào để bạn nhận được giá trị đầu vào trực tiếp trong JavaScript mà không có bất kỳ phần tử HTML nào?

Làm thế nào để bạn lấy đầu vào trong JavaScript?

Chúng ta có thể nhận phần tử theo giá trị trong JavaScript không?

Làm thế nào để bạn khai báo một biến đầu vào trong JavaScript?