HTMLInputElement: thuộc tính valueAsNumber
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 valueAsNumber 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 số hoặc NaN nếu chuyển đổi thành giá trị số không khả thi.
Thuộc tính này cũng có thể được đặt trực tiếp, ví dụ: để đặt giá trị số mặc định dựa trên một điều kiện nào đó.
Giá trị
Một số đại diện cho giá trị của phần tử hoặc NaN nếu chuyển đổi số là không thể.
Ví dụ
Lấy giá trị số
Trong ví dụ này, nhật ký hiển thị giá trị hiện tại của đầu vào number khi thay đổi.
HTML
Chúng ta bao gồm một <input> loại number và một <label> liên kết, với vùng chứa <pre> cho đầu ra.
<label for="number">Chọn một số từ 1 đến 10:</label>
<input name="number" id="number" min="1" max="10" type="number" />
<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 change được kích hoạt.
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");
inputElement.addEventListener("change", () => {
logElement.innerText = `Số: ${inputElement.valueAsNumber}`;
});
Kết quả
Nếu bạn xóa số trong widget, kết quả là NaN.
Lấy giá trị ngày dưới dạng số
Ví dụ này minh họa thuộc tính valueAsNumber của <input> loại datetime-local.
HTML
Chúng ta bao gồm một <input> loại datetime-local:
<label for="date">Chọn ngày và giờ:</label>
<input name="date" id="date" type="datetime-local" />
<pre id="log"></pre>
JavaScript
Khi không có ngày hoặc giờ được chọn, chuỗi rỗng giải quyết thành NaN. Mỗi khi một lựa chọn được thực hiện, sự kiện change được kích hoạt, cập nhật nội dung <pre> hiển thị HTMLInputElement.value của điều khiển biểu mẫu so với giá trị đó dưới dạng số.
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");
logElement.innerText = `Giá trị ban đầu: ${inputElement.valueAsNumber}`;
inputElement.addEventListener("change", () => {
const d = new Date(inputElement.valueAsNumber);
logElement.innerText = `${inputElement.value} giải quyết thành ${inputElement.valueAsNumber}, \nđó là ${d.toDateString()} lúc ${d.toTimeString()}`;
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-input-valueasnumber-dev |