นับ Character ใน input ด้วย useState

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

การนับ character ใน input ช่วยลด error ได้บ้างหรือไม่ คำตอบคือได้ค่ะแต่อาจจะไม่มากขนาดนั้นนะคะ แต่ถ้ามีก็จะช่วยทำให้ user เข้าใจง่ายขึ้นค่ะ ว่าสามารถกรอกข้อมูลได้จำนวนเท่าไร โดยจะลดขั้นตอนการ validate character ที่เรากำหนดไว้ในโปรแกรมได้อีกด้วยค่ะ

และในยุคสมัยที่เราเขียน react js แน่นอนค่ะว่ามันจะต้องมีท่าเขียน​ code แบบเข้าใจง่ายๆ ตามสไตล์ชาว State Hook ตามมาดูกันค่ะ 🤓

เริ่มจากเขียนโครง input component กันก่อนนะคะ โดยที่ set max char ที่อนุญาตให้ใส่ใน input ที่ 10 ตัวอักษรนะคะ compile แล้วจะได้ผลแบบนี้ค่ะ

(อันนี้คือใส่ style เล็กน้อยเพื่อความดูง่ายนะคะ)

จากนั้นเราก็เพิ่ม {count}state มาเป็นตัวนับค่ะ ตั้งค่าเริ่มต้นไว้ที่ 0

compile แล้วจะได้ผลแบบนี้ค่ะ

จากนั้นเราจะใช้ onChange เพื่อจับเหตุการณ์ที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงข้อมูลภายใน input และเลือกที่จะโฟกัสการเปลี่ยนแปลงที่ value length ด้วย target.value.lengthเมื่อนำมาผูกกับ {count}state ก็เสร็จเรียบร้อยค่ะ

ตัวเลขรันตามข้อมูลใน input แล้วค่ะ > <

แต่ถ้าเราอยากจะเขียนตัวเลขจากมากลงไปหาน้อยล่ะ … ก็สามารถทำได้ค่ะ โดยเราจะประกาศค่าตัวแปร maxChar ไว้ และใช้ตามจุดต่างๆ ดังนี้นะคะ

และใช่ค่ะ ในส่วนของการนับ character นั้นเราจะเอา maxChar ตั้ง แล้วลบออกด้วย count ค่ะ ซึ่งผลที่ได้คือ

และก็สำเร็จ! สามารถดู code ตัวอย่างได้ที่ >>>

* นอกจาก input แล้วเรายังสามารถใช้ท่านี้กับ textarea ได้ด้วยนะคะ 😉

หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อยนะคะ 😇
สุดท้ายนี้ต้องขอขอบคุณบทความด้านล่างมา ณ ที่นี้ด้วยค่ะ 😊
(Thank you Mahmoud Abdelwahab)

Get the Number of Characters for a Text Area Using React's useState Hook