إنشاء نموذج HTML يرسل البيانات إلى صفحة أخرى عند الضغط على زر "Enter" في لوحة المفاتيح

عبدالله الصرابي · 17 مارس 2023

ابغا اسوي امر انه اذا ضغظت مثلا انتر من الكيبورد يسوي امر مثلا الذهاب الى صفحة اخره

تم التعديل في 25 مارس 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 17 مارس 2023

باستطاعتك استخدام العنصر "form" في HTML مع وظيفة "submit" لتحقيق هذا الأمر. حيث يتم استخدام الوظيفة "submit" لإرسال النموذج إلى صفحة أخرى عند النقر على زر "submit" أو الضغط على زر "Enter" في لوحة المفاتيح.

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

<form action="page2.html">
  <label for="search">Enter Search Term:</label>
  <input type="text" id="search" name="search">
  <input type="submit" value="Search">
</form>

في المثال السابق، يتم إرسال النموذج إلى صفحة "page2.html" عند الضغط على زر "Enter" بعد إدخال مصطلح البحث في حقل النص المسمى "search". يمكنك تغيير قيمة الخاصية "action" للإشارة إلى الصفحة التي تريد إرسال النموذج إليها.

مع مراعاة كتابة مسار الصفحة الأخرى بشكل سليم.

وهناك طريقة أخرى لكن يتطلب ذلك استخدام جافاسكريبت.

يمكن استخدام الأحداث مثل "EventTarget" و "addEventListener" في جافاسكريبت لربط حدث "keypress" ومن ثم إجراء الإجراء المطلوب.

document.addEventListener("keypress", function(e) {
  if (e.key === "Enter") {
    window.location.href = "page2.html";
  }
});

تم استخدام "addEventListener" لربط حدث "keypress" مع دالة تحقق مما إذا كان رمز المفتاح الذي تم الضغط عليه هو Enter أم لا. إذا كان الرمز "Enter" ، وتم استخدام window.location.href لتحويل المستخدم إلى الصفحة المحددة. ويمكنك تغيير "page2.html" إلى العنوان الذي تريد تحويل المستخدم إليه.

أحمد رضا5 · 17 مارس 2023

لتحقيق هذا الهدف، يمكنك استخدام JavaScript للتعرف على الحدث "ضغط مفتاح" من لوحة المفاتيح وتنفيذ الإجراء المطلوب. يمكن استخدام الدالة "addEventListener" لإضافة حدث استجابة لضغطة المفتاح Enter على صفحة HTML معينة.

فيما يلي مثال بسيط يقوم بفحص إذا ما تم الضغط على مفتاح Enter، وإذا كان الأمر كذلك، يتم تحويل الصفحة إلى رابط محدد:

document.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
    window.location.href = "https://www.example.com";
  }
});

في هذا المثال، يتم استخدام دالة "addEventListener" لإضافة حدث استجابة لضغطة المفتاح على المستند (document). يتم استخدام الشرط "event.key === 'Enter'" للتحقق من أن الضغطة كانت على مفتاح Enter. وفي حال كانت الضغطة على مفتاح Enter، يتم استخدام "window.location.href" لتحويل الصفحة إلى رابط الوجهة الذي تم تحديده.

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

بالإضافة إلى الطريقة التي تم شرحها أعلاه، يمكنك استخدام أي من الطرق التالية لتنفيذ إجراء عند الضغط على مفتاح Enter:

1- استخدام تابع "onkeydown" في عنصر input:

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

<input type="text" name="input-box" onkeydown="if(event.keyCode==13) window.location='https://www.example.com';">

في هذا المثال، يتم استخدام الدالة "onkeydown" في عنصر input لتحقق من الضغط على مفتاح Enter. في حال تم الضغط على مفتاح Enter، يتم استخدام "window.location" لتحويل الصفحة إلى رابط الوجهة الذي تم تحديده.

2- استخدام تابع "onkeydown" في صفحة HTML:

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

<!DOCTYPE html>
<html>
  <head>
    <title>Press Enter Key Example</title>
    <script>
      function handleKeyDown(event) {
        if (event.key === 'Enter') {
          window.location.href = 'https://www.example.com';
        }
      }
    </script>
  </head>
  <body onkeydown="handleKeyDown(event)">
    <h1>Press Enter Key Example</h1>
    <p>Press the Enter key to navigate to <a href="https://www.example.com">https://www.example.com</a>.</p>
  </body>
</html>

في هذا المثال، يتم استخدام الدالة "onkeydown" في صفحة HTML لتنفيذ تابع "handleKeyDown" عند الضغط على أي مفتاح في لوحة المفاتيح. وفي حال تم الضغط على مفتاح Enter، يتم استخدام "window.location" لتحويل الصفحة إلى رابط الوجهة الذي تم تحديده.

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

محمد Fahmy · 18 مارس 2023

هناك عدة طرق يمكن استخدامها للقيام بذلك باستخدام HTML و JavaScript.

يمكنك الحصول على حقل الإدخال باستخدام getElementById وإضافة مستمع لحدث keypress على حقل الإدخال.
ثم يمكنك التحقق مما إذا كان المستخدم قد ضغط على مفتاح “Enter” باستخدام خاصية keyCode أو which من كائن الحدث.
إذا تم الضغط على مفتاح “Enter” ، يمكنك استخدام window.location.href لإعادة توجيه المستخدم إلى صفحة جديدة.

أنظر هذا الكود.

HTML

<input type="text" id="myInput">

JavaScript

// احصل على حقل الإدخال
var input = document.getElementById("myInput");
// قم بتنفيذ دالة عندما يضغط المستخدم على مفتاح في لوحة المفاتيح
input.addEventListener("keypress", function(event) {
  // إذا ضغط المستخدم على مفتاح "Enter" في لوحة المفاتيح
  if (event.keyCode === 13 || event.which === 13) {
    // قُم بإعادة توجيه المستخدم إلى صفحة جديدة
    window.location.href = "newPage.html";
  }
});

13 هو كود المفتاح “Enter”.

طريقة أخرى هي استخدام jQuery للتعامل مع الحدث keypress والتحقق مما إذا كان المستخدم قد ضغط على مفتاح “Enter”. يمكنك القيام بذلك كما يلي:

$("#myInput").keypress(function(event) {
  if (event.which == 13) {
    window.location.href = "newPage.html";
  }
});

طريقة أخرى هي استخدام نموذج HTML وإضافة حدث onsubmit على النموذج Form. يمكنك التحقق مما إذا كان المستخدم قد ضغط على مفتاح “Enter” داخل حقل الإدخال (عند الضغط علي مفتاح “Enter” سوف يتم تشغيل الحدث onsubmit تلقائياً )، وإعادة توجيه المستخدم إلى صفحة جديدة. يمكنك القيام بذلك كما يلي:

<form onsubmit="redirect(event)">
  <input type="text" id="myInput">
</form>

<script>
function redirect(event) {
  event.preventDefault();
  window.location.href = "newPage.html";
}
</script>

Mohammed Seyam · 18 مارس 2023

لعمل ذلك بلغة HTML، يمكنك استخدام عنصر النموذج (Form element) وعنصر الزر (Button element) وخاصية الإجراء (Action attribute) لتحديد عنوان الصفحة التي ستذهب إليها عند النقر على الزر.

هذا مثال بسيط:

<form action="https://www.example.com">
  <button type="submit">اضغط هنا</button>
</form>

في هذا المثال، عند النقر على زر "اضغط هنا"، سيتم إرسال نموذج إلى عنوان URL "https://www.example.com".

وإذا كنت ترغب في تنفيذ أمر JavaScript معين عند الضغط على الزر، يمكنك استخدام خاصية الأمر (onclick attribute) كما يلي:

<button onclick="alert('مرحبا بك!')">اضغط هنا</button>

في هذا المثال، عند النقر على زر "اضغط هنا"، سيتم تنفيذ أمر JavaScript بسيط يقوم بعرض نافذة تنبيه (alert) تحتوي على النص "مرحبا بك!".

إنشاء نموذج HTML يرسل البيانات إلى صفحة أخرى عند الضغط على زر "Enter" في لوحة المفاتيح

السؤال

عبدالله الصرابي

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

أحمد رضا5

1- استخدام تابع "onkeydown" في عنصر input:

2- استخدام تابع "onkeydown" في صفحة HTML:

محمد Fahmy

Mohammed Seyam

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية