مشخصات مقاله
-
2892
-
0.0
-
7478
-
0
-
0
آموزش Input Type : Number
آموزش Input Type : Number
در HTML5 می توانید عددی را به عنوان اسپینر در فیلد ورودی داشته باشد که پیکان هایی به سمت بالا و پایی در قسمت راست تکست باکس وجود دارند که برای افزایش یا کاهش این عدد به کار می روند. لطفا گالری اسپینر را در زیر ببینید.
در امر نگارش مرورگرهایی که در ویندوز این کار را انجام می دهند اپرا و گوگل کروم می باشند.
1 | <label for="movie">How often you watch movie in week : </label> <input id="movie" type="number" value="0" /> <button></button> |
اگر شما از گوگل کروم 8 استفاده می کننید یک مقدار غیر عددی مانند a، b و یا ? را امتحان کنید، کروم به شما اجازه چنین کاری نخواهد داد اما اجازه گذاشتن e را می دهد، چرا چنین است؟! زیرا e می تواند بخشی ازیک عدد ممیزی شناور باشد، برای مثال 5.34 e+12.
از طرف دیگر اپرا به شما اجازه می دهد هرچه می خواهید در فیلد وارد کنید.
ما باید برخی ویژگی هایی را که می توانیم در نوع عدد ورودی داشته باشیم کشف کنیم.
اگر شما یک شرکت نرم افزار هستید و نرم افزار شما توسط تعدادی مجوز کاربر فروخته شده است، حداقل مجوزهایی که فروخته اید 5 می باشد و این عدد 5 تا 5 تا افزایش می یابد و بیشترین مجوزی که می توانید به هر مشتری بفروشید 30 است.
1 | <label for="user_lic">Number of user license : </label> <input id="user_lic" type="number" min="5" max="30" step="5" value="5" />d <button></button> |
اگر برای افزایش و یا کاهش مقدار از جاوااسکریپت استفاده کردید، راه حل آن اینجاست.
- spinner.stepUp(x) - x مقداری که می خواهید در فیلد افزایش دهید.
- spinner.stepDown(x) - x مقداری که تمایل دارید در فیلد کاهش دهید.
- spinner.valueAsNumber –مقدار ورودی را به جای یک رشته به عنوان عدد ممیزی شناور گزارش می دهد.
یک اسپینر با پیکان های نسبتا کوچک رو به بالا و پایین ممکن است زیاد برای لمس توسط انگشتان برای یک عملکرد لمسی مناسب نباشند. مرورگرهای آیفون و اندروید 2.2 هردو<input type="number"> را به عنوان یک تکست باکس نرمال اجرا می کنند اما به یوزرها یک صفحه کلید اعداد برای وارد کردن داده ها ارائه می دهند.
صفحه ی آیفون در سمت چپ و صفحه ی HTC Desire (android 2.2) در سمت راست ارائه شده است.
