HTMLInputElement: thuộc tính value
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính value của giao diện HTMLInputElement đại diện cho giá trị hiện tại của phần tử <input> dưới dạng chuỗi.
Thuộc tính này cũng có thể được đặt trực tiếp, ví dụ: để đặt giá trị mặc định dựa trên một điều kiện nào đó.
Giá trị
Một chuỗi chỉ định giá trị mặc định của phần tử <input>.
Ví dụ
Lấy giá trị đầu vào văn bản
Trong ví dụ này, nhật ký hiển thị giá trị hiện tại khi người dùng nhập dữ liệu vào đầu vào.
HTML
Chúng ta bao gồm một <input> và một <label> liên kết, với một vùng chứa <pre> cho đầu ra.
<label for="given-name">Tên của bạn:</label>
<input name="given-name" id="given-name" />
<pre id="log"></pre>
JavaScript
innerText của phần tử <pre> được cập nhật thành giá trị hiện tại của <input> mỗi khi sự kiện keyup được kích hoạt.
const logElement = document.getElementById("log");
const inputElement = document.getElementById("given-name");
inputElement.addEventListener("keyup", () => {
logElement.innerText = `Tên: ${inputElement.value}`;
});
Kết quả
Lấy giá trị màu
Ví dụ này minh họa thuộc tính value với <input> loại color.
HTML
Chúng ta bao gồm một <input> loại color:
<label for="color">Chọn một màu:</label>
<input name="color" id="color" type="color" />
<pre id="log"></pre>
JavaScript
innerText của phần tử <pre> được cập nhật với giá trị màu mặc định (#000000) và sau đó cập nhật mỗi khi sự kiện change được kích hoạt.
const logElement = document.getElementById("log");
const inputElement = document.getElementById("color");
logElement.innerText = `Màu: ${inputElement.value}`;
inputElement.addEventListener("change", () => {
logElement.innerText = `Màu: ${inputElement.value}`;
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-input-value |