کانال بله, جهت پشتیبانی و اطلاع رسانی کانال بله, جهت پشتیبانی و اطلاع رسانی
عضویت
ورود کاربر جدید هستید؟ ثبت نام کنید
مشاوره رایگان
مشخصات مقاله
  • 0
  • 0.0
  • 915
  • 0
  • 0
از کجا باید بازی سازی را شروع کرد؟
  1. نقشه راه تبدیل شدن به یک توسعه دهنده بازی!
  2. تست

تست

آموزش Input Type : Number

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

Render "Number" input as Spinner
Browsers
IE 9 Beta
Firefox 13
✓ (in Mac OS, but not Windows)
Safari 5
✓
Chrome 8
✓
Opera 11
‎<label for="movie">How often you watch movie in week : </label>
<input id="movie" type="number" ‎value="0" />‎

اگر شما از گوگل کروم 8 استفاده می کننید یک مقدار غیر عددی مانند a، b و یا ? را امتحان کنید، کروم به شما اجازه چنین کاری نخواهد داد اما اجازه گذاشتن e را می دهد، چرا چنین است؟! زیرا e می تواند بخشی ازیک عدد ممیزی شناور باشد، برای مثال 5.34 e+12.
از طرف دیگر اپرا به شما اجازه می دهد هرچه می خواهید در فیلد وارد کنید.
ما باید برخی ویژگی هایی را که می توانیم در نوع عدد ورودی داشته باشیم کشف کنیم.

Descriptions
Attributes
Value مقدار پیش فرض جعبه ی ورودی است وقتی که یک صفحه بارگذاری می شود. این ویژگی متداول برای عنصر ورودی می باشد، بدون توجه به نوعی که استفاده می کنید.
value
مشخصا کمترین مقدار شما از عدد. من باید کمترین مقدار را 0 تعیین کنم چرا که عدد منفی در تعداد دفعات تماشای فیلم در یک هفته بی معناست.
min
واضح است که بزرگترین عدد قسمت ورودی را مشخص می کند.
max
فاکتور مقیاس گام، اگر این ویژگی مشخص نشده باشد مقدار پیش فرض 1 می باشد.
step

اگر شما یک شرکت نرم افزار هستید و نرم افزار شما توسط تعدادی مجوز کاربر فروخته شده است، حداقل مجوزهایی که فروخته اید 5 می باشد و این عدد 5 تا 5 تا افزایش می یابد و بیشترین مجوزی که می توانید به هر مشتری بفروشید 30 است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
<div class="house" id="h"> 
    <div class="h-lights">
      <div class="h-light"></div>
      <div class="h-light"></div>
      <div class="h-light"></div>
      <div class="h-light"></div>
      <div class="h-light"></div>
      <div class="h-light"></div>
    </div>
    <div class="h-shadow"></div>
    <div class="alt">
      <div class="alt__front face"> </div>
      <div class="alt__back face"> </div>
      <div class="alt__right face"> </div>
      <div class="alt__left face"> </div>
      <div class="alt__top face"> 
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
      </div>
      <div class="alt__bottom face"> </div>
    </div>
    <div class="alb">
      <div class="alb__front face"> </div>
      <div class="alb__back face"> </div>
      <div class="alb__right face"> </div>
      <div class="alb__left face"> </div>
      <div class="alb__top face"> </div>
      <div class="alb__bottom face"> </div>
    </div>
    <div class="arb">
      <div class="arb__front face"> </div>
      <div class="arb__back face"> </div>
      <div class="arb__right face"> </div>
      <div class="arb__left face"> </div>
      <div class="arb__top face"> </div>
      <div class="arb__bottom face"> </div>
    </div>
    <div class="blt">
      <div class="blt__front face"> </div>
      <div class="blt__back face"> </div>
      <div class="blt__right face"> </div>
      <div class="blt__left face"> </div>
      <div class="blt__top face"> </div>
      <div class="blt__bottom face"> </div>
    </div>
    <div class="blt2">
      <div class="blt2__front face"> </div>
      <div class="blt2__back face"> </div>
      <div class="blt2__right face"> </div>
      <div class="blt2__left face"> </div>
      <div class="blt2__top face"> </div>
      <div class="blt2__bottom face"> </div>
    </div>
    <div class="blb">
      <div class="blb__front face"> </div>
      <div class="blb__back face"> </div>
      <div class="blb__right face"> </div>
      <div class="blb__left face"> </div>
      <div class="blb__top face"> </div>
      <div class="blb__bottom face"> </div>
    </div>
    <div class="blb2">
      <div class="blb2__front face"> </div>
      <div class="blb2__back face"> </div>
      <div class="blb2__right face"> </div>
      <div class="blb2__left face"> </div>
      <div class="blb2__top face"> </div>
      <div class="blb2__bottom face"> </div>
    </div>
    <div class="puerta-c">
      <div class="puerta">
        <div class="puerta__front face"> </div>
        <div class="puerta__back face"> </div>
        <div class="puerta__right face"> </div>
        <div class="puerta__left face"> </div>
        <div class="puerta__top face"> </div>
        <div class="puerta__bottom face"> </div>
      </div>
      <div class="puerta-l">
        <div class="puerta-l__front face"> </div>
        <div class="puerta-l__back face"> </div>
        <div class="puerta-l__right face"> </div>
        <div class="puerta-l__left face"> </div>
        <div class="puerta-l__top face"> </div>
        <div class="puerta-l__bottom face"> </div>
      </div>
      <div class="puerta-r">
        <div class="puerta-r__front face"> </div>
        <div class="puerta-r__back face"> </div>
        <div class="puerta-r__right face"> </div>
        <div class="puerta-r__left face"> </div>
        <div class="puerta-r__top face"> </div>
        <div class="puerta-r__bottom face"> </div>
      </div>
      <div class="puerta-t">
        <div class="puerta-t__front face"> </div>
        <div class="puerta-t__back face"> </div>
        <div class="puerta-t__right face"> </div>
        <div class="puerta-t__left face"> </div>
        <div class="puerta-t__top face"> </div>
        <div class="puerta-t__bottom face"> </div>
      </div>
    </div>
    <div class="cuadro-l">
      <div class="cuadro-l__front face"> </div>
      <div class="cuadro-l__back face"> </div>
      <div class="cuadro-l__right face"> </div>
      <div class="cuadro-l__left face"> </div>
      <div class="cuadro-l__top face"> </div>
      <div class="cuadro-l__bottom face"> </div>
    </div>
    <div class="cuadro-r">
      <div class="cuadro-r__front face"> </div>
      <div class="cuadro-r__back face"> </div>
      <div class="cuadro-r__right face"> </div>
      <div class="cuadro-r__left face"> </div>
      <div class="cuadro-r__top face"> </div>
      <div class="cuadro-r__bottom face"> </div>
    </div>
    <div class="librero">
      <div class="librero__front face"> </div>
      <div class="librero__back face"> </div>
      <div class="librero__right face"> </div>
      <div class="librero__left face"> </div>
      <div class="librero__top face"> </div>
      <div class="librero__bottom face"> </div>
    </div>
    <div class="libros"> 
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
      <div class="libro">
        <div class="libro__front face"> </div>
        <div class="libro__back face"> </div>
        <div class="libro__right face"> </div>
        <div class="libro__left face"> </div>
        <div class="libro__top face"> </div>
        <div class="libro__bottom face"> </div>
      </div>
    </div>
    <div class="fotos"> 
      <div class="foto">
        <div class="foto__front face"> </div>
        <div class="foto__back face"> </div>
        <div class="foto__right face"> </div>
        <div class="foto__left face"> </div>
        <div class="foto__top face"> </div>
        <div class="foto__bottom face"> </div>
      </div>
      <div class="foto">
        <div class="foto__front face"> </div>
        <div class="foto__back face"> </div>
        <div class="foto__right face"> </div>
        <div class="foto__left face"> </div>
        <div class="foto__top face"> </div>
        <div class="foto__bottom face"> </div>
      </div>
    </div>
    <div class="cajas"> 
      <div class="caja">
        <div class="caja__front face"> </div>
        <div class="caja__back face"> </div>
        <div class="caja__right face"> </div>
        <div class="caja__left face"> </div>
        <div class="caja__top face"> </div>
        <div class="caja__bottom face"> </div>
      </div>
      <div class="caja">
        <div class="caja__front face"> </div>
        <div class="caja__back face"> </div>
        <div class="caja__right face"> </div>
        <div class="caja__left face"> </div>
        <div class="caja__top face"> </div>
        <div class="caja__bottom face"> </div>
      </div>
      <div class="caja">
        <div class="caja__front face"> </div>
        <div class="caja__back face"> </div>
        <div class="caja__right face"> </div>
        <div class="caja__left face"> </div>
        <div class="caja__top face"> </div>
        <div class="caja__bottom face"> </div>
      </div>
    </div>
    <div class="tv">
      <div class="tv__front face"> </div>
      <div class="tv__back face"> </div>
      <div class="tv__right face"> </div>
      <div class="tv__left face"> </div>
      <div class="tv__top face"> </div>
      <div class="tv__bottom face"> </div>
    </div>
    <div class="repisa-t">
      <div class="repisa-t__front face"> </div>
      <div class="repisa-t__back face"> </div>
      <div class="repisa-t__right face"> </div>
      <div class="repisa-t__left face"> </div>
      <div class="repisa-t__top face"> </div>
      <div class="repisa-t__bottom face"> </div>
    </div>
    <div class="repisa-b">
      <div class="repisa-b__front face"> </div>
      <div class="repisa-b__back face"> </div>
      <div class="repisa-b__right face"> </div>
      <div class="repisa-b__left face"> </div>
      <div class="repisa-b__top face"> </div>
      <div class="repisa-b__bottom face"> </div>
    </div>
    <div class="bocina-l">
      <div class="bocina-l__front face"> </div>
      <div class="bocina-l__back face"> </div>
      <div class="bocina-l__right face"> </div>
      <div class="bocina-l__left face"> </div>
      <div class="bocina-l__top face"> </div>
      <div class="bocina-l__bottom face"> </div>
    </div>
    <div class="bocina-r">
      <div class="bocina-r__front face"> </div>
      <div class="bocina-r__back face"> </div>
      <div class="bocina-r__right face"> </div>
      <div class="bocina-r__left face"> </div>
      <div class="bocina-r__top face"> </div>
      <div class="bocina-r__bottom face"> </div>
    </div>
    <div class="muro">
      <div class="muro__front face"> </div>
      <div class="muro__back face"> </div>
      <div class="muro__right face"> </div>
      <div class="muro__left face"> </div>
      <div class="muro__top face"> </div>
      <div class="muro__bottom face"> </div>
    </div>
    <div class="sillon-c">
      <div class="sillon-b">
        <div class="sillon-b__front face"> </div>
        <div class="sillon-b__back face"> </div>
        <div class="sillon-b__right face"> </div>
        <div class="sillon-b__left face"> </div>
        <div class="sillon-b__top face"> </div>
        <div class="sillon-b__bottom face"> </div>
      </div>
      <div class="sillon-t">
        <div class="sillon-t__front face"> </div>
        <div class="sillon-t__back face"> </div>
        <div class="sillon-t__right face"> </div>
        <div class="sillon-t__left face"> </div>
        <div class="sillon-t__top face"> </div>
        <div class="sillon-t__bottom face"> </div>
      </div>
      <div class="sillon-l">
        <div class="sillon-l__front face"> </div>
        <div class="sillon-l__back face"> </div>
        <div class="sillon-l__right face"> </div>
        <div class="sillon-l__left face"> </div>
        <div class="sillon-l__top face"> </div>
        <div class="sillon-l__bottom face"> </div>
      </div>
      <div class="sillon-r">
        <div class="sillon-r__front face"> </div>
        <div class="sillon-r__back face"> </div>
        <div class="sillon-r__right face"> </div>
        <div class="sillon-r__left face"> </div>
        <div class="sillon-r__top face"> </div>
        <div class="sillon-r__bottom face"> </div>
      </div>
    </div>
    <div class="mesa-c">
      <div class="mesa">
        <div class="mesa__front face"> </div>
        <div class="mesa__back face"> </div>
        <div class="mesa__right face"> </div>
        <div class="mesa__left face"> </div>
        <div class="mesa__top face"> </div>
        <div class="mesa__bottom face"> </div>
      </div>
      <div class="mesa-p">
        <div class="mesa-p__front face"> </div>
        <div class="mesa-p__back face"> </div>
        <div class="mesa-p__right face"> </div>
        <div class="mesa-p__left face"> </div>
        <div class="mesa-p__top face"> </div>
        <div class="mesa-p__bottom face"> </div>
      </div>
      <div class="mesa-p">
        <div class="mesa-p__front face"> </div>
        <div class="mesa-p__back face"> </div>
        <div class="mesa-p__right face"> </div>
        <div class="mesa-p__left face"> </div>
        <div class="mesa-p__top face"> </div>
        <div class="mesa-p__bottom face"> </div>
      </div>
      <div class="mesa-p">
        <div class="mesa-p__front face"> </div>
        <div class="mesa-p__back face"> </div>
        <div class="mesa-p__right face"> </div>
        <div class="mesa-p__left face"> </div>
        <div class="mesa-p__top face"> </div>
        <div class="mesa-p__bottom face"> </div>
      </div>
      <div class="mesa-p">
        <div class="mesa-p__front face"> </div>
        <div class="mesa-p__back face"> </div>
        <div class="mesa-p__right face"> </div>
        <div class="mesa-p__left face"> </div>
        <div class="mesa-p__top face"> </div>
        <div class="mesa-p__bottom face"> </div>
      </div>
      <div class="mesa-shadow"></div>
    </div>
    <div class="tablet">
      <div class="tablet__front face"> </div>
      <div class="tablet__back face"> </div>
      <div class="tablet__right face"> </div>
      <div class="tablet__left face"> </div>
      <div class="tablet__top face"> </div>
      <div class="tablet__bottom face"></div>
    </div>
  </div>
  <script src="./code.js"></script>
</body>
</html>

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

  • spinner.stepUp(x) - x مقداری که می خواهید در فیلد افزایش دهید.
  • spinner.stepDown(x) - x مقداری که تمایل دارید در فیلد کاهش دهید.
  • spinner.valueAsNumber –مقدار ورودی را به جای یک رشته به عنوان عدد ممیزی شناور گزارش می دهد.

یک اسپینر با پیکان های نسبتا کوچک رو به بالا و پایین ممکن است زیاد برای لمس توسط انگشتان برای یک عملکرد لمسی مناسب نباشند. مرورگرهای آیفون و اندروید 2.2 هردو<input type="number"> را به عنوان یک تکست باکس نرمال اجرا می کنند اما به یوزرها یک صفحه کلید اعداد برای وارد کردن داده ها ارائه می دهند.
صفحه ی آیفون در سمت چپ و صفحه ی HTC Desire (android 2.2) در سمت راست ارائه شده است.

آموزش Number
1400/12/05 915 0
سوالات و نظرات
نظرات شما

نظرات خود را ثبت کنید...