ضبط عرض حقل الإدخال ديناميكيًا على مدخلاته

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

لسوء الحظ، فإن تعيين الحد الأدنى للعرض باستخدام خاصية العرض الأدنى في CSS لا يعمل مع حقول الإدخال. ومع ذلك، توفر المتصفحات الحديثة وحدة بديلة تسمى "ch" (عرض الحرف)، وهي مستقلة عن الخط وتساوي عرض الحرف "0" في أي خط.

لإنشاء عرض حقل إدخال ديناميكي، يمكننا استخدام كود جافا سكريبت التالي:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length   "ch";
}

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

input{ font-size:1.3em; padding:.5em; }

يكمل هذا تنفيذ عرض حقل الإدخال القابل للتعديل ديناميكيًا والذي يتوسع أو يتقلص تلقائيًا بناءً على محتواه.