مقدمة الحالة: غالبًا ما نرى بعض المواقع التي تحتوي على مربعات نصية نصية. عند الدخول ، هناك مطالبات نصية أدناه عدد الكلمات التي يمكنك إدخالها. اليوم هو تنفيذ هذه الوظيفة. بالطبع ، نظرًا لأن الصفحة تحتوي على العديد من النصوص ، فليس من الممكن استخدام منطق JS واحد للتحكم ، لذلك يجب تغليفه بطريقة صغيرة. بالطبع ، لا يزال لدى عبودي بعض أوجه القصور ، ولكن يتم تنفيذ الوظيفة الأساسية.
أولاً ، قدم حالة تنفيذ Textarea واحدة
جزء HTML:
<TextArea id = "text_txt1"> </swertarea> <span id = "num_txt1"> يمكن إدخال 600 كلمة المتبقية </span>
جزء JS:
$ (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') ؛} {$ ('#num_txt1'). من أو يساوي 0 ، لا يمكن زيادة عدد الكلمات ، لا يمكن أن يكون سوى 600 كلمة} // console.log ($ ('#num_txt'). html (str)) ؛}) ؛})ثم أدخل حالات تنفيذ Textarea متعددة ضمن نفس الصفحة
الوظيفة changeLength (obj ، num) {obj.on ('keyup' ، function () {var txtval = obj.val (). {num.html ('repain input 0 words') ؛ obj.val (obj.val (). substring (0 ، 600)) ؛} // console.log ($ ('#num_txt'). html (str)) ؛}) changeLength ($ ('#text_txt1') ، $ ('#num_txt1')) ؛ ChangeLength ($ ('#text_txt2') ، $ ('#num_txt2')) ؛ c HangeLength ($ ('#text_txt3') ، $ ('#num_txt3')) ؛ changeLength ($ ('#text_txt4') ، $ ('#num_txt4')) ؛}) ؛بالطبع ، يمكن أيضًا تغليف عدد الكلمات المطلوبة هنا داخل الوظيفة ، لكنني لن أغلفها. هذا يدرك أنه عند إدخال النص ، سيتم عرض الكلمات المتبقية تلقائيًا داخل الفترة. عندما تصل قيمة الإدخال إلى أعلى قيمة ، سيتم عرض الكلمات المتبقية على أنها 0 ، ولا يمكن ملء المحتوى في محتوى جديد. عند حذف النص ، يمكن لـ SPAN الحصول على عدد الكلمات المتبقية ديناميكيًا.
فيما يلي رموز الآخرين ، وهذه المرة استعارت أيضًا بعض أساليب الكتابة للآخرين
HTML:
<div> <p> مقدمة: </p> <textarea id = "content" name = "sign" style = "height: 60px ؛ overflow-y: hidden ؛
JS:
// تحقق من طول وظيفة textarea changelength (obj ، lg) {var len = $ (obj) .val () ؛ $ (obj) .next (). find ("H3"). النص (lg-len.length) ؛ if (len.length> = lg) {$ (obj) .next ().ما سبق هو طريقة الحصول على الكلمات المتبقية الديناميكية في Textarea استنادًا إلى JS التي أدخلها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!