input وchange: حدّث معاينة النص أثناء الكتابة أو بعد تأكيده

الخلاصة السريعة

هيّئ المعاينة من القيمة الحالية

اقرأ value للحصول على النص الحالي، واستدعِ دالة العرض أولًا لتهيئة المعاينة. [3]

احفظ HTML، ثم ضع مقاطع JavaScript بالترتيب بعده داخل script. تبدأ preview بكلمة مرحبا، وتبقى confirmed فارغة حتى يعمل مستمع القسم الثالث. [3] [2]

مرّر الشيفرة أفقيًا عند الحاجة.

<label for="note">نص البطاقة</label>
<input id="note" type="text" value="مرحبا">
<p id="preview"></p>
<p id="confirmed"></p>

مرّر الشيفرة أفقيًا عند الحاجة.

const field = document.getElementById("note");
const preview = document.getElementById("preview");
const confirmed = document.getElementById("confirmed");
function renderPreview() {
  preview.innerText = field.value;
}
renderPreview();

حدّث النص أثناء التحرير

يطلق تحرير المستخدم لحقل النص input؛ تستطيع تحديث المعاينة قبل انتقال التركيز. [1]

أضف المستمع التالي إلى الشيفرة السابقة. اكتب في الحقل وراقب الفقرة الأولى وأنت ما زلت داخله. الحدث متعلق بتحرير القيمة؛ لا يلزم ربط العرض بكل ضغطة مفتاح. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

field.addEventListener("input", renderPreview);

قارن بما يظهر بعد المغادرة

في حقل النص، يأتي change عند فقدان التركيز بعد تغير القيمة، لا بمجرد الدخول والخروج دون تعديل. [2]

أضف المستمع الثاني، ثم غيّر النص واضغط Tab للخروج. تبقى الفقرة الثانية على آخر قيمة عرضتها حتى يحدث change جديد؛ لا نستخدمها دليلًا على حفظ النص في خادم. [2]

هذا المثال لحقل type="text". لا تعمم توقيت فقدان التركيز على كل عناصر الإدخال؛ فالمربع checkbox يطلق change عند تحديده أو إلغاء تحديده. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

field.addEventListener("change", () => {
  confirmed.innerText = field.value;
});

حدّث العرض بعد الإسناد البرمجي

إسناد value من JavaScript لا يطلق input تلقائيًا؛ حدّث المعاينة صراحة بعد الإسناد. [1] [3]

نفّذ المقطع التالي بعد إعداد المستمعين. تتغير القيمة والمعاينة لأننا استدعينا دالة العرض مباشرة؛ إضافة المستمع وحدها لا تجعل إسناد value يحاكي تحرير المستخدم. [1] [3]

تعرض المعاينة نص الحقل الحالي كما تقرؤه الدالة. قراءة النص وعرضه هنا لا تنفذ إرسال نموذج أو حفظًا دائمًا. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

field.value = "بطاقة جديدة";
renderPreview();