แนะนำกรณี: เรามักจะเห็นเว็บไซต์บางแห่งที่มีกล่องข้อความ textarea เมื่อคุณป้อนจะมีข้อความแจ้งด้านล่างคุณสามารถป้อนคำได้กี่คำ วันนี้คือการใช้ฟังก์ชั่นนี้ แน่นอนเนื่องจากหน้ามี textareas หลายตัวจึงไม่สามารถใช้ตรรกะ JS เดียวเพื่อควบคุมได้ดังนั้นจึงต้องถูกห่อหุ้มด้วยวิธีเล็ก ๆ แน่นอนว่าบรรจุภัณฑ์ของฉันยังคงมีข้อบกพร่องอยู่บ้าง แต่มีการใช้ฟังก์ชั่นพื้นฐาน
ก่อนอื่นแนะนำกรณีการใช้งาน textarea เดียว
ส่วน HTML:
<textarea id = "text_txt1"> </textarea> <span id = "num_txt1"> สามารถป้อน 600 คำที่เหลือได้ </span>
JS Part:
$ (function () {$ ('#text_txt1') on ('keyup', function () {var txtval = $ ('#text_txt1'). val (). length; console.log (txtval); var str = parseint (600-txtval); console.log (str); ) {$ ('#num_txt1'). html ('ที่เหลืออยู่สามารถป้อน'+str+'word');} else {$ ('#num_txt1'). html ('ที่เหลืออยู่สามารถป้อน 0 คำ'); $ ('#text_txt1') มากกว่าหรือเท่ากับ 0 จำนวนคำไม่สามารถเพิ่มได้มันสามารถเป็น 600 คำ} // console.log ($ ('#num_txt'). html (str));});})จากนั้นแนะนำกรณีการใช้งาน textarea หลายกรณีภายใต้หน้าเดียวกัน
ฟังก์ชั่นการเปลี่ยนแปลง (obj, num) {obj.on ('keyup', ฟังก์ชัน () {var txtval = obj.val (). ความยาว; // console.log (txtval); var str = parseint (600-txtval); // console.log (str); {num.html ('อินพุตที่เหลืออยู่ 0 คำ'); obj.val (obj.val (). substring (0, 600));} // console.log ($ ('#num_txt') html (str));});} $ (ฟังก์ชัน () Changelength ($ ('#text_txt1'), $ ('#num_txt1'))); changelength ($ ('#text_txt2'), $ ('#num_txt2' Hangelength ($ ('#text_txt3'), $ ('#num_txt3'))); changelength ($ ('#text_txt4'), $ ('#num_txt4'));});แน่นอนว่าการนับจำนวนคำที่ต้องการที่นี่สามารถห่อหุ้มภายในฟังก์ชั่นได้ แต่ฉันจะไม่ห่อหุ้มมัน สิ่งนี้ตระหนักดีว่าเมื่อป้อนข้อความคำที่เหลือจะแสดงโดยอัตโนมัติภายในช่วง เมื่อค่าอินพุตถึงค่าสูงสุดคำที่เหลือจะแสดงเป็น 0 และเนื้อหาไม่สามารถกรอกในเนื้อหาใหม่ได้ เมื่อลบข้อความการขยายสามารถรับจำนวนคำที่เหลือได้แบบไดนามิก
ด้านล่างนี้เป็นรหัสของผู้อื่นและคราวนี้ฉันได้ยืมวิธีการเขียนบางอย่างของผู้อื่น
html:
<div> <p> บทนำ: </p> <textarea id = "content" name = "sign" style = "ความสูง: 60px; overflow-y: hidden;
JS:
// ตรวจสอบความยาวของฟังก์ชั่น textarea changelength (obj, lg) {var len = $ (obj) .val (); $ (obj) .next (). ค้นหา ("h3"). ข้อความ (lg-len.length); ถ้า (len.length> = lg) {$ (obj) .next () ค้นหา ("h3"). ข้อความ (0); $ (obj) .valข้างต้นเป็นวิธีการรับคำที่เหลืออยู่ใน Textarea ตาม JS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!