การทำงานกับช่องข้อความใน JavaScript

ตอนนี้เราจะเรียนรู้วิธีการรับข้อความ จากผู้ใช้ของเว็บไซต์ของเรา สำหรับสิ่งนี้ ใน HTML มีแท็กพิเศษ input, ซึ่งเป็นช่องข้อความสำหรับป้อน ข้อมูล

html<input>

แท็กนี้มีแอตทริบิวต์พิเศษ value, ที่กำหนดข้อความเริ่มต้น ซึ่งจะถูกเขียน ในอินพุตเมื่อเข้าสู่หน้าเว็บ:

html<input value="text">

ผู้ใช้เว็บไซต์ของเราหลังจากเข้าสู่ หน้าเว็บแล้วสามารถเปลี่ยนข้อความของอินพุตได้ ใน ขณะเดียวกัน หากเรามีตัวแปรที่เก็บ ลิงก์ไปยังอินพุตนี้ คุณสมบัติ value ของตัวแปรนี้จะเก็บค่า ข้อความปัจจุบันของอินพุตเสมอ

ลองทดสอบในทางปฏิบัติ สมมติว่ามีอินพุต ที่มีแอตทริบิวต์ value:

html<input id="elem" value="text">

รับลิงก์ไปยังอินพุตนี้ในตัวแปร:

javascriptlet elem = document.querySelector('#elem');

จากนั้นแสดงข้อความปัจจุบันของอินพุตออกทางหน้าจอ:

javascriptconsole.log(elem.value);

จากนั้นเปลี่ยนข้อความของอินพุตเป็นอย่างอื่น:

javascriptelem.value = 'new text';