قم باحتجاز مفتاح الإدخال، ولكن ليس عند اختيار اقتراح الإكمال التلقائي للمتصفح

Question

لدي بعض مربعات النص على الصفحة وأريد النقر فوق رابط عندما يضغط المستخدم على زر الإدخال في أي منها.

يمكنني بسهولة اعتراض زر الإدخال باستخدام جافا سكريبت (من خلال البحث عن 13 بوصة event.keyCode و event.which)، ولكنني واجهت مشكلة عند تشغيل ميزة الإكمال التلقائي للمتصفح واقتراح ما قد يرغب المستخدم في كتابته.نجد أن المستخدمين غالبًا ما يضغطون على زر الإدخال لقبول اقتراح المتصفح، بدلاً من علامة التبويب.وهذا يربك المستخدمين حيث يتم النقر على الرابط فورًا، في حين أنهم ما زالوا يعتزمون إدخال نص في بعض الحقول الأخرى.

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

أنا أستخدم jQuery، لذا لا تتردد في تقديم حلول jQuery.

Answer 1

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

Answer 2

وعن طريق فكرة tuanvt في إجابة مقبولة، كتبت المساعد مسج التي لا وظيفة.

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

وI ضمان أن نطبق هذه القواعد فقط إلى مربعات النص: كل عناصر الإدخال الأخرى تتصرف بشكل طبيعي

.

وأوبرا لا بالفعل بعمل جيد جدا ما كنت أحاول تحقيقه، لذلك أنا لا فرض قواعد بلدي في هذا المتصفح - وإلا فإن المستخدم سيكون للضغط على إدخال مرتين

واختبارها في IE6، IE7، IE8، فايرفوكس 3.5.5، جوجل كروم 3.0، سفاري 4.0.4، أوبرا 10.00.

وأنها متاحة على jquery.com باسم SafeEnter المساعد . لراحتك، رمز للإفراج 1.0 كما يلي:

// jQuery plugin: SafeEnter 1.0
// http://plugins.jquery.com/project/SafeEnter
// by teedyay
//
// Fires an event when the user presses Enter, but not whilst they're in the browser's autocomplete suggestions

//codesnippet:2e23681e-c3a9-46ce-be93-48cc3aba2c73
(function($)
{
    $.fn.listenForEnter = function()
    {
        return this.each(function()
        {
            $(this).focus(function()
            {
                $(this).data('safeEnter_InAutocomplete', false);
            });
            $(this).keypress(function(e)
            {
                var key = (e.keyCode ? e.keyCode : e.which);
                switch (key)
                {
                    case 13:
                        // Fire the event if:
                        //   - we're not currently in the browser's Autocomplete, or
                        //   - this isn't a textbox, or
                        //   - this is Opera (which provides its own protection)
                        if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input[type=text]') || $.browser.opera)
                        {
                            $(this).trigger('pressedEnter', e);
                        }
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;

                    case 40:
                    case 38:
                    case 34:
                    case 33:
                        // down=40,up=38,pgdn=34,pgup=33
                        $(this).data('safeEnter_InAutocomplete', true);
                        break;

                    default:
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;
                }
            });
        });
    };

    $.fn.clickOnEnter = function(target)
    {
        return this.each(function()
        {
            $(this)
                .listenForEnter()
                .bind('pressedEnter', function()
                {
                    $(target).click();
                });
        });
    };
})(jQuery);

Answer 3

وحاول إعداد الإكمال التلقائي من مربع الاختيار الخاص بك، رغم أن هذا ليس موحد لجميع المتصفح لكنه يعمل على المتصفحات الشائعة.

<input type="text" autocomplete="off" />

Answer 4

ومسج لطيفة وجميع ولكن لماذا لا تستخدم جافا سكريبت بسيط؟

function submit_on_enter(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = (e.keyCode ? e.keyCode : e.which);
    else return true;

    if (keycode == 13) {
        if (window.previousKeyCode) {
            // down=40,up=38,pgdn=34,pgup=33
            if (window.previousKeyCode == 33 || window.previousKeyCode == 34 ||
                window.previousKeyCode == 39 || window.previousKeyCode == 40) {
                    window.previousKeyCode = keycode;
                    return true;
            }
        }
        submit_form();
        return false;
    } else {
        window.previousKeyCode = keycode;
        return true;
    }
}

Answer 5

وتعقب مفتاح الدخول على الحدث KeyUp، اكتمال اختيار بحلول الوقت الذي كشف مفتاح الدخول على الحدث KeyUp.

والكشف عن مفتاح الدخول على KeyDown و قيام عملية تتداخل مع وظيفة الإكمال التلقائي.

Answer 6

وهذا يعمل بالنسبة لي:

$('input').keypress(function(e) {
    if(e.which == 13) {
        if(this.value)
        {
            $("#submitbutton").click();
        }
    }
});

Answer 7

إذا كنت تستخدم أنواع حقل النموذج HTML5 الجديدة، قد ترغب في تغيير كود teedyay على النحو التالي:

case 13:
                    // Fire the event if:
                    //   - we're not currently in the browser's Autocomplete, or
                    //   - this isn't a textbox, or
                    //   - this is Opera (which provides its own protection)
                    if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input([type=text],[type=email],[type=number],[type=search],[type=tel],[type=url])') || $.browser.opera)
                    {
                        ...

لاحظ أنواع المدخلات الجديدة.

Answer 8

ولست متأكدا إذا كنت محاصرة الضغط على مفتاح على النافذة، أو على عناصر DOM محددة. يتعين عليك أن تفعل هذا الأخير (على سبيل المثال على عنصر form)، ثم في معالج الحدث الخاص بك، والنظر في وجوه الحدث لتحديد أي عنصر DOM كان أصل هذا الحدث. إذا كان هذا الحقل النص مع الإكمال التلقائي، ثم return false;.

ونلقي نظرة على .keypress() معالج الحدث مسج ووفي event.target خاصية الكائن الحدث.

Answer 9

وأنا واجهت نفس المشكلة وبينما لم يكن مثاليا كنت نهج آخر الذي أعتبره أكثر بساطة. عند إنشاء الإكمال التلقائي I ضبط الوقت الحالي لهذا الحدث حدد ثم مقارنتها قبل اتخاذ أية إجراءات:

$('#completer').autocomplete({
  source: ['First', 'Last'], delay: 0, minLength: 0,
  select: function(ev, ui) {
    $(ev.target).data('lastAutocompleteSelectTimestamp', new Date().getTime())
  }
})

$(document).on('keydown', '#completer', function(ev){
  if (ev.which != 13) return
  var lastAutocompletionTime = $(ev.currentTarget).data('lastAutocompleteSelectTimestamp')
  if (!lastAutocompletionTime || (new Date().getTime() - lastAutocompletionTime) > 100)
    alert('Enter pressed outside autocomplete context')
})

<html>
<head>
  <link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
  <input id=completer type=text />
</body>
</html>

Answer 10

نهج آخر (أكثر أمانا) هو استخدم ال keyup و keydown الأحداث للكشف عن تغييرات القيمة.

الإكمال التلقائي يحدد القيمة بعد ال keyDown حدث.عند ملاحظة كلا الحدثين، يكون الحل التالي أكثر موثوقية من الحلول الأخرى:

var tempValue;
// fire when enter is 1. pressed and 2. released
function handlerEnter(type){
     // save the value for comparison
     if(type == 'keyDown'){
         tempValue = document.activeElement.value;
         return null; // quit
     }

     // quit when the value changed in between keyDown & keyUp
     if(type == 'keyUp' && tempValue != document.activeElement.value){
         return null;
     }

     // autocomplete wasn't used
     doStuff();
}

^{_{قد ترغب في التحقق مما إذا document.activeElement هو المدخلات.لا تتردد في استخدام امتداد النموذج الأولي الشرير الخاص بي.}}