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

转载于:https://www.cnblogs.com/toly-top/p/9781980.html

相关资源：非常简单实用的弹出框控件控件控件控件