[js]input:textをradioっぽく使う方法

あんまり使わないけど使うときは使う。

どういうアレか
組み方
ポイント
機能追加
気付き

どういうアレか

完成イメージとして、自由入力にすると情報をソートを掛けられないので、入力内容を選択式にする、限定する。

これを見ると、じゃあinput:radioとかselectでいいじゃんって話ではある。だけど、一定条件下においてvalueの値を変更したい場合もある。そしたら、定型でないとおかしいこれらは不向きだろうって感じになる。

input:textに仕込んだほうがよくない？ってなる。ユーザーからすればどっちでもいいだろって思うけど。

組み方

inputをクリックしたら選択リストを表示して、選択項目をクリックしたらinputに値を挿入して選択リストを非表示にする。

inputとradioもどき

<input type="text" id="inputSelect" readonly>
<ul id="selectList">
    <li><a title="選択1">選択1</a></li>
    <li><a title="選択2">選択2</a></li>
    <li><a title="選択3">選択3</a></li>
    <li><a title="選択4">選択4</a></li>
</ul>

cssは最低限のところ

ul#selectList{
    display:none;
}

jsはこんな感じ

$(function(){
    $('input#inputSelect').on('click',function(){
        $('ul#selectList').fadeIn('fast');
    })
    $('ul#selectList a').on('click',function(){
        $('ul#selectList a').removeClass('active');
        $(this).addClass('active');
        $('input#inputSelect').val($(this).attr('title'));
        $('ul#selectList').fadeOut('fast');
    })
})

valueに挿入するのは<a>のtitle。

ポイント

form関係のタグから開放されるので装飾し放題になる（radioでやれるけど）。

valueの値を動的に変更し放題になる（textじゃなくてもできるけど）。

機能追加

例えば時間とか期間指定で選択項目の文言（value）の値を変えたり追記したりする。

気付き

readonlyについての理解が深まった。

「pointer-events: none;」は動作自体を無効化にするけど、readonlyは記入を無効化するだけの機能。なので、クリック判定が生きてる。