html5常用控制元件

input type=”number”

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

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

---

input type=”range”

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

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

---

input type=”date”

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

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

---

type=”color”

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

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

---

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());
    })

---

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());
    })