Cara menggunakan input dalam js

Cara menggunakan JavaScript untuk mengendalikan elemen input: Dapatkan atribut dan nilai akses nod DOM (seperti .value) Tambah pendengar acara (seperti fokus, kabur, input) Nota: Jenis elemen input mempengaruhi kaedah pemprosesan nilai . Selepas menambah pendengar acara, Ia harus dialih keluar apabila tidak digunakan Gunakan atribut pengesahan HTML5 digabungkan dengan JavaScript untuk pengesahan nilai

Cara menggunakan elemen input dalam JavaScript

Pengenalan
digunakan dalam borang HTML untuk menerima Elemen input pengguna, JavaScript boleh mengendalikan elemen input melalui API DOM untuk mendapatkan dan menetapkan sifat dan nilainya.

Langkah penggunaan
Untuk menggunakan JavaScript untuk mengendalikan elemen input, anda perlu mengikuti langkah berikut:

1 Dapatkan elemen input
Gunakan document.getElementById() atau . document.querySelector( ) Mendapat nod DOM bagi elemen input. document.getElementById() 或 document.querySelector() 获取 input 元素的 DOM 节点。

2. 访问属性和值
使用 .value 属性读取或设置 input 元素的值。
使用 .placeholder 属性读取或设置占位符文本。
使用 .type 属性获取 input 元素的类型。

3. 添加事件监听器
使用 addEventListener() 方法为 input 元素添加事件监听器，如：

• focus 事件：当 input 元素获得焦点时触发。
• blur 事件：当 input 元素失去焦点时触发。
• input 事件：当 input 元素中的值发生变化时触发。

示例
以下示例演示如何使用 JavaScript 获取 input 元素的值并将其显示在控制台中：

const input = document.getElementById("myInput");
console.log(input.value);

其他方法
除了上述属性和方法，JavaScript 还可以使用其他方法操作 input 元素：

• .focus()：将焦点设置到 input 元素上。
• .blur()：移除 input 元素的焦点。
• .select()：全选 input 元素中的文本。
• .setCustomValidity()：设置 input 元素的自定义验证消息。

注意事项
使用 JavaScript 操作 input 元素时，需要注意以下几点：

• input 元素的类型会影响其值处理方式。
• 使用 addEventListener() 方法添加事件监听器后，记得在不使用时将其移除。
• 验证 input 元素的值时，应结合 HTML5 的输入验证属性，如 required 和 pattern

2. Akses atribut dan nilai 🎜🎜Gunakan atribut .value untuk membaca atau menetapkan nilai elemen input. 🎜Gunakan sifat .placeholder untuk membaca atau menetapkan teks ruang letak. 🎜Gunakan atribut .type untuk mendapatkan jenis elemen input. 🎜🎜🎜3 Tambah pendengar acara🎜🎜Gunakan kaedah addEventListener() untuk menambah pendengar acara pada elemen input, seperti: 🎜

• fokus peristiwa: Dicetuskan apabila elemen input memperoleh fokus. 🎜<li> <code>kabur peristiwa: dicetuskan apabila elemen input kehilangan fokus. 🎜
• input peristiwa: dicetuskan apabila nilai dalam elemen input berubah. 🎜🎜🎜🎜Contoh🎜🎜Contoh berikut menunjukkan cara menggunakan JavaScript untuk mendapatkan nilai elemen input dan memaparkannya dalam konsol: 🎜rrreee🎜🎜Kaedah lain🎜🎜Selain sifat dan kaedah di atas, JavaScript juga boleh gunakan kaedah lain untuk memanipulasi elemen input: 🎜
  • .focus(): Tetapkan fokus kepada elemen input. 🎜
  • .blur(): Alih keluar fokus elemen input. 🎜
  • .select(): Pilih semua teks dalam elemen input. 🎜
  • .setCustomValidity(): Tetapkan mesej pengesahan tersuai bagi elemen input. 🎜🎜🎜🎜Nota🎜🎜Apabila menggunakan JavaScript untuk mengendalikan elemen input, anda perlu memberi perhatian kepada perkara berikut: 🎜
    • Jenis elemen input akan mempengaruhi cara nilainya diproses. 🎜
    • Selepas menambah pendengar acara menggunakan kaedah addEventListener(), ingat untuk mengalih keluarnya apabila tidak digunakan. 🎜
    • Apabila mengesahkan nilai elemen input, anda harus menggabungkan atribut pengesahan input HTML5, seperti diperlukan dan pattern. 🎜🎜

Atas ialah kandungan terperinci Cara menggunakan input dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!