首页 > 代码库 > html5 datalist兼容易用javascript封装实现
html5 datalist兼容易用javascript封装实现
各个浏览器对于datalist的支持不一致,而且放入需要像select的value-title的那样的列表查看titile, 代码中使用value,支持并不好,深入了解可以看这个 HTML5 datalist在实际项目中应用的可行性研究
使用js代码对datalist进行包装可以达到想要的效果
chrome下效果
firefox下效果
ie下跟firefox类同
实现代码如下
function fireEvent(element, event){ if (document.createEventObject){ // IE浏览器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent(‘on‘+event,evt) } else{ // 其他标准浏览器使用dispatchEvent方法 var evt = document.createEvent( ‘HTMLEvents‘ ); // initEvent接受3个参数: // 事件类型,是否冒泡,是否阻止浏览器的默认行为 evt.initEvent(event, true, true); return !element.dispatchEvent(evt); } }; // input.hidden.id = id // datalist.id = id__list // datalist.input.id = id__input function datalist_change(event) { var e = event || window.event; var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1; var id = e.currentTarget.id.replace(‘__input‘, ‘‘); // chrome show and input is value; other show is lable input is value; var input_value = http://www.mamicode.com/document.getElementById(id + ‘__input‘).value; var nodes = document.getElementById(id + ‘__list‘).childNodes; var setValue = http://www.mamicode.com/(id, value) => { for(var i in nodes) { if (nodes[i].nodeName == ‘OPTION‘ && nodes[i].value =http://www.mamicode.com/= value) { document.getElementById(id).value = nodes[i].label; return true; } } alert("‘" + value + "‘ is Illegal value."); var input_id = (id.indexOf("__input") !== -1)? id : id + ‘__input‘; document.getElementById(input_id).value = ‘‘; document.getElementById(input_id).focus(); return false; }; if (isChrome) { setValue(id, input_value); // set hidden input value; } else { document.getElementById(id).value = input_value; setValue(id + ‘__input‘, input_value);// set input value = http://www.mamicode.com/label; } fireEvent(document.getElementById(id), ‘change‘); } function create_datalist_options(data) { var options = ‘‘; if (navigator.userAgent.indexOf("Chrome") > -1) { var tmp = []; Object.keys(data).map((key, i) => { tmp[data[key]] = key; }); data = tmp; } Object.keys(data).map((key, i) => { options += ‘<option label="‘+data[key]+‘" value="http://www.mamicode.com/‘+key+‘" />‘; }); return options; } function create_datalist(id, opts) { var value = http://www.mamicode.com/opts.value || ‘‘; var style = opts.style ? ‘class="‘+ opts.style + ‘"‘ : ‘‘; var data = http://www.mamicode.com/opts.data || []; var tips = opts.tips || ‘‘; var name = opts.name || id; var ivalue = http://www.mamicode.com/data[value]? data[value] :""; var html = ‘<input type="hidden" id="‘+id+‘" name="‘+name+‘" value="http://www.mamicode.com/‘+value+‘" />‘ + ‘<input type="text" id="‘+id+‘__input" list="‘+id+‘__list" onchange="datalist_change(event)" ‘+ style + ‘ value="http://www.mamicode.com/‘+ivalue+‘" placeholder="‘+tips+‘"/>‘ + ‘<datalist id="‘+id+‘__list">‘; html += create_datalist_options(data); html += "</datalist>"; return html; }
html5 datalist兼容易用javascript封装实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。