তারিখ ইনপুট সমস্যার সংক্ষিপ্তসার হিসাবে:
- আপনাকে সেগুলি প্রদর্শন করতে হবে (অর্থাত্ প্রদর্শন এড়ানো: কিছুই নয়) অন্যথায় ইনপুট ইউআই ট্রিগার করা হবে না;
- কোনও স্থানধারক তাদের সাথে পরস্পরবিরোধী (অনুমান অনুসারে, এবং কারণ তাদের একটি নির্দিষ্ট ইউআই প্রদর্শন করতে হবে);
- অপ্রয়োজনীয় সময়ের জন্য তাদের অন্য ইনপুট ধরণের রূপান্তর করা স্থানধারককে অনুমতি দেয় তবে ফোকাসের পরে কমপক্ষে কম সময়ের জন্য ভুল ইনপুট ইউআই (কীবোর্ড) ট্রিগার করে, কারণ ফোকাস ইভেন্টগুলি বাতিল করা যায় না।
- beforeোকানো (আগে) বা যোগ করার পরে (পরে) তারিখের ইনপুট মানটি প্রদর্শিত হতে বাধা দেয় না।
এই প্রয়োজনীয়তাগুলি পূরণ করতে আমি যে সমাধানটি পেয়েছি তা হ'ল স্বাভাবিক কৌশলটি দেশীয় ফর্ম উপাদানগুলির স্টাইল করার জন্য: উপাদানটি প্রদর্শিত হয় তবে দৃশ্যমান নয় তা নিশ্চিত করুন এবং তার সম্পর্কিত লেবেলের মাধ্যমে তার প্রত্যাশিত শৈলীর প্রদর্শন করুন । সাধারণত, লেবেলটি ইনপুট হিসাবে প্রদর্শিত হবে (একটি স্থানধারক সহ), তবে এটির উপরে।
সুতরাং, এইচটিএমএল এর মতো:
<div class="date-input>
<input id="myInput" type="date">
<label for="myInput">
<span class="place-holder">Enter a date</span>
</label>
</div>
হিসাবে স্টাইল করা যেতে পারে:
.date-input {
display: inline-block;
position: relative;
}
/* Fields overriding */
input[type=date] + label {
position: absolute; /* Same origin as the input, to display over it */
background: white; /* Opaque background to hide the input behind */
left: 0; /* Start at same x coordinate */
}
/* Common input styling */
input[type=date], label {
/* Must share same size to display properly (focus, etc.) */
width: 15em;
height: 1em;
font-size: 1em;
}
এই জাতীয় সম্পর্কিত লেবেলে যে কোনও ইভেন্ট (ক্লিক করুন, ফোকাস করুন) তা ফিল্ডেই প্রতিফলিত হবে এবং তাই তারিখের ইনপুট ইউআই ট্রিগার করবে।
আপনি যদি এই জাতীয় সমাধানটি লাইভ পরীক্ষা করতে চান তবে আপনি নিজের ট্যাবলেট বা মোবাইল থেকে এই কৌনিক সংস্করণটি চালাতে পারেন ।