โพสต์นี้จะกำหนดขั้นตอนการกำหนดค่าให้กับ textbox โดยใช้ JavaScript
จะกำหนดค่าให้กับกล่องข้อความโดยใช้ JavaScript ได้อย่างไร
สำหรับการกำหนดค่าให้กับ textbox ให้ใช้วิธีการต่อไปนี้:
มาดูการทำงานของวิธีการเหล่านี้แยกกัน!
วิธีที่ 1: กำหนดค่าให้กับกล่องข้อความโดยใช้ setAttribute() Method
“ setAttribute() ” ใช้เพื่อกำหนดค่าให้กับกล่องข้อความ มันถูกใช้เพื่อเพิ่มหรือตั้งค่าแอตทริบิวต์ให้กับองค์ประกอบบางอย่างและให้ค่า เมธอดนี้ใช้พารามิเตอร์สองตัวเป็นอาร์กิวเมนต์ และทั้งสองเป็นข้อบังคับ
ไวยากรณ์
ทำตามไวยากรณ์ที่กล่าวถึงด้านล่างสำหรับเมธอด setAttribute():
setAttribute ( แอตทริบิวต์ชื่อแอตทริบิวต์ค่า ) ;ที่นี่, ' ค่าแอตทริบิวต์ ” คือค่าของแอตทริบิวต์ที่มีการระบุชื่อ
ตัวอย่าง
ก่อนอื่นเราจะสร้างส่วนหัวและช่องป้อนข้อมูลด้วยค่าเริ่มต้น ' ข้อความ ” ค่าตัวยึดตำแหน่ง ถัดไป เพิ่มปุ่มที่จะเรียกใช้เมธอด “myFunction()” เมื่อคลิก:
< h5 > คลิกที่ปุ่มเพื่อดู ค่าเริ่มต้น ค่าของฟิลด์ข้อความ h5 >< ประเภทอินพุต = 'ข้อความ' id = 'ข้อความของฉัน' ตัวยึดตำแหน่ง = 'ข้อความ' >
< ปุ่ม onclick = 'ฟังก์ชันของฉัน ()' > คลิก ปุ่ม >
ในไฟล์ JS กำหนดฟังก์ชันชื่อ “ ฟังก์ชั่นของฉัน () ” และเข้าถึงกล่องข้อความโดยใช้ “ getElementbyId() ” แล้วตั้งค่าด้วยความช่วยเหลือของ “ setAttribute() ' กระบวนการ:
ฟังก์ชั่น myFunction ( ) {เอกสาร. getElementById ( 'ข้อความของฉัน' ) . setAttribute ( 'ค่า' , 'คำแนะนำลินุกซ์' ) ;
}
จากผลลัพธ์จะเห็นได้ว่าเมื่อคลิกปุ่มแล้ว ค่าของ textbox จะถูกตั้งเป็น “ Linuxคำแนะนำ ”:
มาดูขั้นตอนถัดไปในการกำหนดค่าให้กับกล่องข้อความ
วิธีที่ 2: กำหนดค่าให้กับกล่องข้อความโดยใช้คุณสมบัติค่าข้อความ
มีอีกแนวทางในการกำหนดค่าให้กับ textbox คือ “ ค่า ” คุณสมบัติของข้อความ ในวิธีนี้ คุณจะต้องกำหนดค่าให้กับกล่องข้อความโดยใช้คุณสมบัติค่าเท่านั้น
ไวยากรณ์
ใช้ไวยากรณ์ต่อไปนี้เพื่อกำหนดค่าให้กับกล่องข้อความโดยใช้คุณสมบัติค่าขององค์ประกอบข้อความ:
ค่า = 'ข้อความ' ;ตัวอย่าง
ที่นี่ เราจะกำหนดค่าให้กับกล่องข้อความที่สร้างไว้แล้วในตัวอย่างก่อนหน้านี้ ในการดำเนินการดังกล่าว ให้เข้าถึงกล่องข้อความใน myFunction() จากนั้นกำหนดค่าที่ต้องการให้กับกล่องข้อความโดยใช้ปุ่ม ' ค่า ' คุณสมบัติ:
ฟังก์ชั่น myFunction ( ) {เอกสาร. getElementById ( 'ข้อความของฉัน' ) . ค่า = 'คำแนะนำลินุกซ์' ;
}
ดังที่คุณเห็นผลลัพธ์ได้สำเร็จ กำหนดค่าให้กับกล่องข้อความ:
เราได้รวบรวมวิธีที่ง่ายที่สุดในการกำหนดค่าให้กับ textbox โดยใช้ JavaScript
บทสรุป
สำหรับการกำหนดค่าให้กับกล่องข้อความโดยใช้ JavaScript คุณสามารถใช้เมธอดที่กำหนดไว้ล่วงหน้าของ JavaScript ที่เรียกว่าเมธอด setAttribute() หรือคุณสมบัติค่าขององค์ประกอบข้อความ ทั้งสองวิธีทำงานอย่างมีประสิทธิภาพในการกำหนดค่าให้กับกล่องข้อความ คุณสามารถเลือกหนึ่งในนั้นได้ตามความต้องการของคุณ ในบทความนี้ เราได้พูดถึงวิธีการกำหนดค่าให้กับ textbox โดยใช้ JavaScript พร้อมตัวอย่างโดยละเอียด