কম্পিউটার টিউটোরিয়াল

HTML Input এলিমেন্ট দিয়ে স্মার্টফোনে न्यুমেরিক কীবোর্ড দেখানো

গত ছয় মাস ধরে আমি একটি ট্রেনিং লগার অ্যাপে সাইড প্রজেক্ট হিসেবে কাজ করছি। আপনি जैसा এক্সপেক্ট করবেন, এমন একটি অ্যাপে নিউমেরিক ইনপুট দরকার।

যখন আপনি যেকোনো কোড এডিটরে অটোকমপ্লিট ব্যবহার করেন, ইনপুট এলিমেন্টের ডিফল্ট টাইপ হয় text:

<input type="text" />

HTML ইনপুট এলিমেন্ট যার টাইপ number সেটি শুধু নিউমেরিক ইনপুট এক্সেপ্ট করে। এই নিউমেরিক ইনপুট ফিল্ডে লেটার টাইপ করার চেষ্টা করুন:

আপনি পারবেন না।

HTML ইনপুট এলিমেন্ট যার টাইপ text, সেটি টেক্সট এবং নাম্বার দুটোই এক্সেপ্ট করে। এই টেক্সট ইনপুট ফিল্ডে নাম্বার এবং লেটার দুটোই টাইপ করার চেষ্টা করুন:

Yay, it works!

যখন আমি আপনার অ্যাপে reps এবং weight-এর জন্য ইনপুট ডিক্লেয়ার করেছিলাম, আমি ডিফল্ট ইনপুট টাইপ text থেকে number-এ চেঞ্জ করিনি। আমি এটার সম্পর্কে চিন্তা করিনি। ডেস্কটপ কম্পিউটারে টেস্ট করার সময় নাম্বার টাইপ করা সহজ, তাই এটা আমাকে বিরক্ত করলনা।

কিন্তু যতক্ষণ আমি আমার iPhone 6-এ আমার অ্যাপ টেস্ট করলাম, ততক্ষণে বুঝতে পারলাম কেন আপনি শুরু থেকেই সঠিক ইনপুট টাইপ ব্যবহার করতেই ভালো।

যদি আপনার ইনপুট এলিমেন্টের টাইপ text-এ সেট থাকে, এবং আপনি সেটি ক্লিক করেন, তবে কমপক্ষে iPhones-এ (আমি সন্দেহ করি Android-এও সিমিলার), আপনার নেটিভ কীবোর্ড পপ-আপ হবে। যেন আপনি কাউকে টেক্সট মেসেজ পাঠাচ্ছেন।

এভাবে:

HTML Input এলিমেন্ট দিয়ে স্মার্টফোনে न्यুমেরিক কীবোর্ড দেখানো

এখন, এই নেটিভ কীবোর্ড আপনাকে নাম্বারের এক্সেস দেয়, কিন্তু প্রথমে আপনাকে 123 বাটনে ক্লিক করতে হবে। এটি একটি অপ্রয়োজনীয় স্টেপ যোগ করে।

একটি ইনপুট ফিল্ড যার একমাত্র উদ্দেশ্য reps এবং ওজন লিফটেডের নাম্বার যোগ করা, সেখানে স্মার্টফোনে নিউমেরিক কীবোর্ড পপ-আপ হলে সেটিই লজিক্যাল।

সেটি করতে, আপনি শুধু নির্দিষ্ট করুন যে আপনি আপনার ইনপুট এলিমেন্টকে নিউমেরিক ইনপুট এক্সেপ্ট করতে চান:

এভাবে:

<input type="number" />

এবং ফলাফল (iOS ডিভাইসে):

HTML Input এলিমেন্ট দিয়ে স্মার্টফোনে न्यুমেরিক কীবোর্ড দেখানো

এটাই সব!

  1. HTML-এ মুছে ফেলা টেক্সট কীভাবে প্রদর্শন করবেন?

  2. HTML-এ যুক্ত করা টেক্সট কীভাবে প্রদর্শন করবেন?

  3. HTML-এ একটি এলিমেন্ট রিড-অনলি কীভাবে করবেন?

  4. HTML-এ এলিমেন্টের টাইপ কীভাবে সেট করবেন?