Capture * All * display-characters in JavaScript؟

Question

لقد تلقيت طلبًا غير عادي مؤخرًا أنني أواجه أصعب وقت معالجة يتضمن التقاط جميع عمليات العرض عند الكتابة في مربع نص. الإعداد على النحو التالي:

لدي مربع نص يحتوي على ملف الحد الاقصى للطول من 10 أحرف. عندما يحاول المستخدم كتابة أكثر من 10 أحرف ، أحتاج إلى إخطار المستخدم بأنهم يكتبون إلى ما وراء حد عدد الأحرف.

أبسط الحلول هو تحديد أ الحد الاقصى للطول من 11 ، اختبر الطول على كل keyup, ، وقم بالرجوع إلى 10 أحرف ولكن هذا الحل يبدو كلودجي بعض الشيء. ما أفضل القيام به هو التقاط الشخصية من قبل keyup واعتمادًا على ما إذا كان هو شحنة عرض أم لا ، يقدم الإشعار للمستخدم ومنع الإجراء الافتراضي.

ستكون القائمة البيضاء صعبة لأننا نتعامل مع الكثير من البيانات الدولية.

لقد لعبت مع كل مجموعة من زر أسفل, ضغط المفتاح, ، و keyup, ، قراءة Event.KeyCode, Event.charcode, ، و الحدث, ، لكن لا يمكنني العثور على مجموعة واحدة تعمل في جميع المتصفحات. أفضل ما يمكنني إدارته هو ما يلي الذي يعمل بشكل صحيح في> = ie6 ، chrome5 ، ff3.6 ، لكنه يفشل في الأوبرا:

ملاحظة: الرمز التالي يستخدم jQuery.

$(function(){
  $('#textbox').keypress(function(e){
    var $this = $(this);
    var key = ('undefined'==typeof e.which?e.keyCode:e.which);
    if ($this.val().length==($this.attr('maxlength')||10)) {
      switch(key){
        case 13: //return
        case 9:  //tab
        case 27: //escape
        case 8:  //backspace
        case 0:  //other non-alphanumeric
          break;
        default:
          alert('no - '+e.charCode+' - '+e.which+' - '+e.keyCode);
          return false;
      };
    }
  });
});

سأمنح أن ما أفعله هو على الأرجح أن يفرط في الهندسة ، لكن الآن بعد أن استثمرت فيه ، أود أن أعرف حلًا. شكرا لمساعدتك!

Answer 1

يتمثل الحل البسيط في تحديد طول MaxLength 11 ، واختبار الطول على كل keyup ، والاقتداد إلى 10 أحرف ، لكن هذا الحل يبدو Kludgy قليلاً.

كما أنه يتم هزيمته بسهولة عن طريق Cut/Faste ، السحب/الإسقاط ، النقر بزر الماوس الأيمن فوق undo/redo ، إلخ. لا توجد طريقة موثوقة للحصول على كل جزء محتمل من المدخلات.

لماذا لا يتم ضبطها maxlength إلى 10 ، للسماح للمتصفح بفرض الحد بشكل صحيح ، وإظهار تحذير فقط إذا كان هناك اخر حاول keypress؟ لا تحتاج إلى منع أي إجراء افتراضي لأن المتصفح يعتني بالفعل بالطول ، وبالتالي فإن كمية التحقق من المفاتيح التي يتعين عليك القيام بها أقل.

<input id="x" maxlength="10"/>
<div id="x-warning" style="display: none;">can't type any more!</div>
<script type="text/javascript">
    function LengthMonitor(element, warning) {
        element.onkeypress= function(event) {
            if (event===undefined) event= window.event;
            var code= 'charCode' in event? event.charCode : 'which' in event? event.which : event.keyCode;
            var full= element.value.length===element.maxLength;
            var typed= !(code<32 || event.ctrlKey || event.altKey || event.metaKey);
            warning.style.display= (full & typed)? 'block' : 'none';
        };
        element.onblur= function() {
            warning.style.display= 'none';
        };
    }

    LengthMonitor(document.getElementById('x'), document.getElementById('x-warning'));
</script>

Answer 2

بما أنك تستخدم jQuery بالفعل ، .validate() رائع للأشكال. ما عليك سوى تعيين قاعدة من MaxLength لحقلك ، وأنت على ما يرام. على سبيل المثال

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});

Answer 3

كان لدي موقف مشابه بشكل غامض في تطبيق ويب أعمل فيه حيث كنت بحاجة إلى تقديم ملاحظات للمستخدم ، وعيش ، عند إدخال البيانات في مدخلات.

بصراحة ، كان الحل الأفضل الذي توصلت إليه هو استخدام مربع الإدخال بشكل دوري لاستطلاع مربع الإدخال بشكل دوري. لقد أجريت بعض الاختبارات لإيجاد توازن لطيف بين الاستجابة والكفاءة (أعتقد ~ 400 مللي ثانية).

إنه يعمل بشكل رائع ، وهو أفضل بكثير من محاولة معالجات الأحداث معًا لكل سيناريو (الأساسي ، على تغيير ، إلخ).

إنه ليس أنيقًا كما أريد ، لكنه يعمل.

إذا كنت تريد حقًا القيام بذلك ، فسأشاهد المدخلات في الوقت الفعلي ، والتحقق من طولها. إذا انتهى الأمر ، فقم بقطعه وتنبيه المستخدم.

هذا لن يكون بديلاً للتحقق الآخر من الصحة بالطبع.

أود أن أعتبر أيضًا أن هذا قد يكون غير ضروري. أفترض أنه لطيف ، لكن معظم مواقع الويب تتقدم بحد أقصى وتقديم التحقق من الصحة.

Answer 4

ماذا عن تقديم رسالة إلى المستخدم عندما يتغلب على الحد ، ولكن لا يقتطون مدخلاتهم؟ يمكنك منع التقديم باستخدام حدث OnSubmit ولن يتمتع المستخدم أبدًا بتجربة سيئة في طول الطول أو إدخال عابر. يمكنك تسليط الضوء على المربع باللون الأحمر أو عرض أيقونة أيضًا لدفع النقطة إلى المنزل حقًا.

ومع ذلك ، فإن هذا كله من جانب العميل ، لذلك إذا كنت بحاجة حقًا إلى التحقق من صحة الإدخال ، فيجب أن تكون مدمجة في منطق خادم هدف التقديم (في حالة النموذج).

بدلاً من ذلك ، إذا كان هذا يحدث في الوقت الفعلي ، قم بربط المنطق بمتغير يتم تعيينه بواسطة حدث المفتاح. إذا تم تجاوز حد الطول ، فرض رسالة خطأ ، ولا تقطع ، ولم تقم بتحديث المتغير الخاص.