html5常用控件

input type="number"

數字：<input type="number" value="0" id="number"/>
           

let $num = $('#number');
    $num.on('change input',function (e) {//監聽改變和輸入事件
        console.log($(this).val());
    })
           

number.png

input type="range"

拖動範圍：<input type="range" value="50" id="range"/>
           

let $range = $('#range');
    $range.on('change input', function (e) {//監聽改變和輸入事件
        console.log($(this).val());
    })
           

range.png

input type="date"

選擇日期：<input type="date" value="2018-07-19" id="date"/>
           

let $date = $('#date');
    $date.on('input', function (e) {//監聽輸入事件
        console.log($(this).val());
    })
           

date.png

type="color"

選取顔色：<input type="color" value="#34538b" id="color"/>
           

let $color = $('#color');
    $color.on('input', function (e) {//監聽輸入事件
        console.log($(this).val());
    })
           

color.png

select+option

選擇：
<select id="select">
    <option value="man">男</option>
    <option value="woman">女</option>
    <option value="unknown">未知</option>
</select>
           

let $select = $('#select');
    $select.on('input', function (e) {//監聽輸入事件
        console.log($(this).val());
    })
           

select.png

search+資料

清單：<input id="list" type="search" list="data" placeholder="布局"/>
<datalist id="data">
    <option label="1" value="center">
    <option label="2" value="top">
    <option label="3" value="left">
    <option label="4" value="right">
    <option label="5" value="bottom">
</datalist>
           

let $list = $('#list');
    $list.on('input', function (e) {//監聽輸入事件
        console.log($(this).val());
    })
           

list.png