12
تشکر

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

حتما این برای شما اتفاق اقتاده که زمانی که در حال پر کردن یک فرم هستید لیستی از مقدارهایی که قبلا وارد کرده اید ظاهر میشود و در اغلب موارد کار شما را خیلی آسان میکند.

در سال های گذشته ما با استفاده از Javascript باید اینکار را انجام میدادیم اما در HTML5 به لطف تگ datalist به راحتی میتوان چنین لیست هایی برای راحتی کاربر درست کرد.

کار  به این صورت است که ابتدا لیستمان را درون تگ datalist درست میکنیم سپس به input مربوطه میرویم و با استفاده از خاصیت list لیستمان را به input متصل میکنیم. اما بر اساس Mozilla Developer Network خاصیت list برای inputهای از نوع hidden, checkbox, radio, file و button وجود ندارد.

خب در مثال زیر ما ما لیست خودمان را درست میکنیم.

  <datalist id="city">
    <option value="مشهد">
    <option value="اصفهان">
    <option value="تبریز">
    <option value="تهران">
    <option value="یزد">
    <option value="کرمان">
    <option value="سمنان">
    <option value="همدان">
    <option value="خوزستان">
    <option value="بندرعباس">
    <option value="مازندران">
  </datalist>

خب حالا به سادگی میتوان لیست بالا را به input وصل کرد. اینکار از طریق خصوصیت list و دادن id لیست انجام میشود.

<input type="text" placeholder="محل زندگی" list="city" name="city" />

این لیست را میتوانید به هر چندتا input که میخواهید وصل کنید.

رفتار مرورگرها

در کروم با تایپ اولین حرف گزینه هایی که حرف اول آنها با حرفی که ما زدیم یکسان بود لیست میشوند.

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

و زمانی که دوبار روی input کلیک میکنیم کل لیست نمایش داده میشود.

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

در اپرا زمانی که بر روی input فوکوس میکنیم کل لیست به یکباره به صورت صعودی نمایش داده میشود.

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

فایرفاکس هم مانند کروم عمل میکند فقط در این تفاوت دارد که با تایپ اولین حرف تمام گزینه هایی را که حرف ما درون آنها وجود داشته باشد لیست میشوند.

نگاهی به Datalist در HTML5

نگاهی به Datalist در HTML5

مرورگر سافاری هنوز در صدد پشتیبانی از datalist بر نیامده و IE هم گزارش داده است که در نسخه 10 پشتیبانی را شروع میکند.

 

  • Arash می‌گه:

    ممنونم

  • Arash می‌گه:

    سلام
    من می تونم به جای select در form از datalist استفاده کنم یا هر کدوم برای کاره خاصی استفاده می شه ؟

    • محسن شفیعی می‌گه:

      خیر، شما نمیتونید از datalist به جای select استفاده کنید. select فقط اجازه میده از گزینه های خودش کاربر یکی رو انتخاب کنه. ولی datalist فقط پیشنهاد میده.


  • نظرات این مطلب بسته است.