input type="number"
数字:<input type="number" value="0" id="number"/>
let $num = $('#number');
$num.on('change input',function (e) {//监听改变和输入事件
console.log($(this).val());
})
![9414344-b9ffe0cafeeebc04.png](https://upload-images.jianshu.io/upload_images/9414344-b9ffe0cafeeebc04.png)
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());
})
![9414344-3654b6cccb5df78a.png](https://upload-images.jianshu.io/upload_images/9414344-3654b6cccb5df78a.png)
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());
})
![9414344-20232bd1f854919a.png](https://upload-images.jianshu.io/upload_images/9414344-20232bd1f854919a.png)
date.png
type="color"
选取颜色:<input type="color" value="#34538b" id="color"/>
let $color = $('#color');
$color.on('input', function (e) {//监听输入事件
console.log($(this).val());
})
![9414344-c199b1f5f47d6e8d.png](https://upload-images.jianshu.io/upload_images/9414344-c199b1f5f47d6e8d.png)
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());
})
![9414344-7e5bf76eeb2cc57c.png](https://upload-images.jianshu.io/upload_images/9414344-7e5bf76eeb2cc57c.png)
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());
})
![9414344-19fa931f5aa3d585.png](https://upload-images.jianshu.io/upload_images/9414344-19fa931f5aa3d585.png)
list.png