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