input type=range
JavaScriptでは数値を表示する場合、1000000000000000000000以上の値は指数化(1e+21)されますが、HTMLだと微妙に変わります。この要素ではその値はなんと1000000000000000000(1e+18)です。以下のHTMLでお試しあれ。
<body onload=a.focus()>
<input type=range min=0 max=1e18 value=999999999999999999 onchange="console.log(value)" style="width:100%"id=a>
pageを読み込んだ直後にinput要素が操作対象になるので「←」を1回押すと999999999999999998、「→」を1回押すと1e+18とconsoleに表示されます。
ちなみに指数化されたら、もはや「← →」で操作してもvalue属性値は変化しません(mouse操作では変化)。ついでに言うならmax属性値の最大値は1.7976931348623157e+308程度であり、それを超えると操作上では100とみなされます(100分割)。
step属性値を巨大な値にすれば「← →」押しても増減可能です。「←」で減少、「→」で増加。しかし以下のようなHTMLでは奇妙な事が起こります。変な事が起こります。不思議な事が起こります。
<input type=range step=9.9792015476736e290 max=1.7976931348623155e308 onchange=a.value=value style=width:100%><br>
<input size=33 id=a>
Windowsの場合はまず「End」押してツマミを右端まで移動。もしくはmouse操作で右端に移動。そして「→」を押すと、なんとvalue属性値が減ります! あばばばばば! 押し続けるとどんどん減っていきます! あばばばばば! そして1.79769313486231481e+308に達した時点で不変不動になります(End押下、Home押下、mouseによる操作は可能)。説明してもらおうか…。
それはさておき1.7976931348623157e+308と等価な最大値(309桁)をmax属性に設定するとどうなるでしょう。具体的には以下のようなHTMLです。
<input type=radio max=179769313486231580793728971405303415079934132710037826936173778980444968292764750946649017977587207096330286416692887910946555547851940402630657488671505820681908902000708383676273854845817711531764475730270069855571366959622842914819860834936475292719074168444365510704342711559699508093042880177904174497791>
なんとvalueの取り得る値の最大値が100となるのです! それではmax属性の真の最大値を求めてみましょう。多分以下のような感じになります。
<input type=radio max=179769313486231570999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999>
全然関係無いですがついでなので紹介。
<input type=range max=1 style="width:2em">
このままだと両端をclickする事になるので、やや使いにくいかも。以下のようにすると良いかな?
<input type=range max=1 style="width:2em" onclick=value=title^=1>
input type=text
では以下の要素をclickすると何が起こるかと言えば、指数化されずに1000000000000000000が表示されます。
<input onclick="value=1e18">
以下の場合は指数化されます
<input onclick="value=1e21">
input type=radio
以下のhtmlも面白い事が起こります。clickするとなんと何も起こらないのだ! console.logは勿論黙ってはいないのですが、checkedに関しては無反応を貫くようです。
<input type=radio onclick="checked=!checked;console.log(checked)"><br>
<input type=radio onclick="checked^=1;console.log(typeof checked,checked)">
以下同様
<input type=radio onclick="checked=!checked" name=a>a
<input type=radio onclick="checked=!checked" name=a>b
<input type=radio onclick="checked=!checked" name=a>c
それでは以下のような状態では何が起こるのか? 連打して検証してみて下さい
<input type=radio onclick="checked=!checked;console.log(checked)" checked>