استخدم JavaScript لتغيير إرسال إرسال عند إدخال مفتاح Enter

StackOverflow https://stackoverflow.com/questions/382171

سؤال

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

<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

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

هل هناك أي طريقة تستخدم JavaScript أو غير ذلك لتحديد زر إرسال ما إذا كان المستخدم يضرب المفتاح ENTER في إدخال نص على نموذج HTML؟

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

هذا هو ما حاولت، فإنه لا يغير سلوك التقديم في متصفحات WebKit.
ما الذي نجح في تغيير التركيز() في التعليمة البرمجية التالية انقر().

document.onkeypress = processKey;

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click(); // previously: focus()
    }
}

تحرير: الحل النهائي:

يعمل مع كل متصفح ويقترض فقط مفتاح الدخول عند الحاجة:

لغة البرمجة:

<input type="text" name="something" value="blah" 
    onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

جافا سكريبت:

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click();
        return false;
    }
}
هل كانت مفيدة؟

المحلول

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

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

تعديل:

هنا، حاولت تقديم مثال لك باستخدام JQuery (يمكن بسهولة إنشاء الوظيفة بسهولة بدون جيس) ... اسمحوا لي أن أعرف إذا كان هذا يساعد ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function(){
        $("#f input").filter(":text").keydown( function(event) {
            if (event.keyCode==13) {
                $(this).nextAll().eq(0).click();
            }
        });
    });
    //--></script>
</head>
<body>
    <form name="f" id="f">
        <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
        <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
        <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
    </form>
</body>
</html>

نصائح أخرى

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

ماذا عن استخدام CSS؟ يمكنك فقط تعيين الزر الأول، الزر الافتراضي الخاص بك خارج المنطقة المرئية للشاشة باستخدام "وضع: مطلق؛ اليسار: -200px؛ أعلى: -200px؛". بقدر ما أذكر، لن يتم تجاهله بواسطة أي متصفح، لأنه غير مرئي. هذا يعمل بشكل جيد فقط:

<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
       style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>

وتوفير الأرض ...

مجرد التحكم في حدث الصحافة الرئيسية. وضع onkeypress في الجسم


onkeypress=CheckKeyPress()

ثم التعامل مع مفتاح الدخول


function CheckKeyPress(){
    var code;
    if(!e) var e = window.event;
    if(e.keyCode){
        code = e.keyCode;
    }else if(e.which){
        code = e.which;
    }
    if(code == 13){
        //Do Something
    }
}

لا اعتراض keydown الحدث، اعتراض submit حدث.

وبالتالي: 

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}

ماذا عن استخدام نماذج منفصلة؟ ربما أنا أفتقد شيئا ما يجعل هذا مستحيلا: ص

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top