html5 获取控件,html5常用控件

input type="number"

数字：

let $num = $('#number');

$num.on('change input',function (e) {//监听改变和输入事件

console.log($(this).val());

})

number.png

input type="range"

拖动范围：

let $range = $('#range');

$range.on('change input', function (e) {//监听改变和输入事件

console.log($(this).val());

})

range.png

input type="date"

选择日期：

let $date = $('#date');

$date.on('input', function (e) {//监听输入事件

console.log($(this).val());

})

date.png

type="color"

选取颜色：

let $color = $('#color');

$color.on('input', function (e) {//监听输入事件

console.log($(this).val());

})

color.png

select+option

选择：

男

女

未知

let $select = $('#select');

$select.on('input', function (e) {//监听输入事件

console.log($(this).val());

})

select.png

search+数据

列表：

let $list = $('#list');

$list.on('input', function (e) {//监听输入事件

console.log($(this).val());

})

list.png