FED93. 设置标签
描述
HTML/CSS/JavaScript 解法, 执行用时: 977ms, 内存消耗: 77948KB, 提交时间: 2021-07-09
{"css":".tag-input{\n position: relative;\n border: 1px solid #cccccc;\n padding: 0 5px;\n display: flex;\n flex-flow: row wrap;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 0;\n margin: 5px 0;\n outline: none;\n border: none;\n width: 6.5em;\n height: 24px;\n line-height: 24px;\n}\n.tag{\n padding: 0 10px;\n margin: 5px 5px 5px 0;\n background: #25bb9b;\n color: #ffffff;\n height: 24px;\n line-height: 24px;\n border-radius: 12px;\n font-size: 13px;\n}","js":"var tagInput = {\n isInited: false,\n init: init,\n bindEvent: bindEvent,\n addTag: addTag,\n removeTag: removeTag\n};\ntagInput.init();\n\nfunction init() {\n var that = this;\n if (that.isInited) return;\n that.isInited = true;\n // 请修改这一行代码，保存class为js-input的输入框的dom元素引用\n that.input = document.getElementsByClassName('js-input')[0];\n that.bindEvent();\n}\n\nfunction bindEvent() {\n var that = this;\n var input = that.input;\n if (!input) return;\n input.addEventListener('keydown', function (event) {\n // 请修改这一行代码，判断用户是否按了回车键\n var isEnter = (event.keyCode===13);\n // 请修改这一行代码，判断用户是否按了删除键\n var isDelete = (event.keyCode===8);\n\n (isEnter || isDelete) && event.preventDefault();\n isEnter && that.addTag();\n isDelete && that.removeTag();\n });\n input.parentNode.addEventListener('click', function () {\n input.focus();\n });\n}\n\nfunction addTag() {\n var that = this;\n var input = that.input;\n var curInput = input.value.trim();\n var allTag = document.getElementsByClassName('tag');\n var allTagName = [];\n [].forEach.call(allTag, item=>{\n allTagName.push(item.innerText.trim()); \n });\n if(curInput && allTagName.indexOf(curInput) ===-1 ){\n // 输入不为空而且标签不重复\n var newSpan = document.createElement('span');\n newSpan.setAttribute('class', 'tag');\n newSpan.innerText = curInput;\n input.parentElement.insertBefore(newSpan, input);\n }\n input.value = '';\n}\n\nfunction removeTag() {\n var that = this;\n var input = that.input;\n var curInput = input.value.trim();\n var allTag = document.getElementsByClassName('tag');\n if(curInput===''){\n if(allTag.length > 0){\n // 输入为空且存在标签，则删除最后一个span标签\n allTag[allTag.length-1].remove();\n }\n return;\n }\n // 输入不为空，则删除文本最后一个字符\n // input.value = curInput.slice(0, -1);\n}","html":"<div class=\"tag-input\">\n <span class=\"tag\">前端</span>\n <span class=\"tag\">编程题</span>\n <span class=\"tag\">示例</span>\n <span class=\"tag\">标签</span>\n <input type=\"text\" class=\"js-input\" maxlength=\"6\" placeholder=\"请输入标签\">\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 979ms, 内存消耗: 77856KB, 提交时间: 2021-07-13
{"css":".tag-input{\n position: relative;\n border: 1px solid #cccccc;\n padding: 0 5px;\n display: flex;\n flex-flow: row wrap;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 0;\n margin: 5px 0;\n outline: none;\n border: none;\n width: 6.5em;\n height: 24px;\n line-height: 24px;\n}\n.tag{\n padding: 0 10px;\n margin: 5px 5px 5px 0;\n background: #25bb9b;\n color: #ffffff;\n height: 24px;\n line-height: 24px;\n border-radius: 12px;\n font-size: 13px;\n}","js":" var tagInput = {\n isInited: false,\n init: init,\n bindEvent: bindEvent,\n addTag: addTag,\n removeTag: removeTag\n };\n tagInput.init();\n\n function init() {\n var that = this;\n if (that.isInited) return;\n that.isInited = true;\n // 请修改这一行代码，保存class为js-input的输入框的dom元素引用\n that.input = document.querySelector('.js-input');\n that.tagInput = document.querySelector('.tag-input')\n that.bindEvent();\n }\n\n function bindEvent() {\n var that = this;\n var input = that.input;\n if (!input) return;\n input.addEventListener('keydown', function (event) {\n // 请修改这一行代码，判断用户是否按了回车键\n var isEnter = event.keyCode === 13;\n // 请修改这一行代码，判断用户是否按了删除键\n var isDelete = event.keyCode === 8;\n (isEnter || isDelete) && event.preventDefault();\n isEnter && that.addTag();\n isDelete && that.removeTag();\n });\n input.parentNode.addEventListener('click', function () {\n input.focus();\n });\n }\n\n function addTag() {\n const value = this.input.value.trim()\n if (value) {\n let tagNodes = this.tagInput.querySelectorAll('.tag')\n tagNodes = Array.from(tagNodes)\n const tagName = tagNodes.map(node => {\n return node.innerHTML\n })\n if (tagName.includes(value)) return this.input.value = ''\n const span = document.createElement('span')\n span.className = 'tag'\n span.innerHTML = value\n this.tagInput.insertBefore(span, this.input)\n this.input.value = ''\n }\n }\n\n function removeTag() {\n if (this.input.value) return this.input.value = this.input.value.slice(0, -1)\n const preSpan = this.input.previousElementSibling\n this.tagInput.removeChild(preSpan)\n }","html":"<div class=\"tag-input\">\n <span class=\"tag\">前端</span>\n <span class=\"tag\">编程题</span>\n <span class=\"tag\">示例</span>\n <span class=\"tag\">标签</span>\n <input type=\"text\" class=\"js-input\" maxlength=\"6\" placeholder=\"请输入标签\">\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 979ms, 内存消耗: 77900KB, 提交时间: 2021-07-10
{"css":".tag-input{\n position: relative;\n border: 1px solid #cccccc;\n padding: 0 5px;\n display: flex;\n flex-flow: row wrap;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 0;\n margin: 5px 0;\n outline: none;\n border: none;\n width: 6.5em;\n height: 24px;\n line-height: 24px;\n}\n.tag{\n padding: 0 10px;\n margin: 5px 5px 5px 0;\n background: #25bb9b;\n color: #ffffff;\n height: 24px;\n line-height: 24px;\n border-radius: 12px;\n font-size: 13px;\n}","js":"var tagInput = {\n isInited: false,\n init: init,\n bindEvent: bindEvent,\n addTag: addTag,\n removeTag: removeTag\n};\ntagInput.init();\n\nfunction init() {\n var that = this;\n if (that.isInited) return;\n that.isInited = true;\n // 请修改这一行代码，保存class为js-input的输入框的dom元素引用\n that.input = document.querySelector('.js-input');\n that.bindEvent();\n }\n\n function bindEvent() {\n var that = this;\n var input = that.input;\n if (!input) return;\n input.addEventListener('keydown', function (event) {\n // 请修改这一行代码，判断用户是否按了回车键\n var isEnter = false;\n if (event.keyCode === 13) {\n isEnter = true\n }\n // 请修改这一行代码，判断用户是否按了删除键\n var isDelete = false;\n if (event.keyCode === 8) {\n isDelete = true\n }\n\n (isEnter || isDelete) && event.preventDefault();\n isEnter && that.addTag();\n isDelete && that.removeTag();\n });\n input.parentNode.addEventListener('click', function () {\n input.focus();\n });\n }\n\n function addTag() {\n var that = this;\n var input = that.input;\n // 如果输入空字符串，return\n if (!input.value.trim()) {\n input.value = ''\n return \n }\n // 如果输入已存在的内容相同的标签，return\n var tags = document.querySelectorAll('.tag')\n for(var i = 0; i < tags.length; i++) {\n if (tags[i].innerText === input.value.trim()) {\n input.value = ''\n return \n }\n }\n // 添加标签\n var span = document.createElement('span')\n span.innerHTML = input.value.trim()\n span.className = 'tag'\n input.parentNode.insertBefore(span, input)\n input.value = ''\n }\n\n function removeTag() {\n var that = this;\n var input = that.input;\n \n // 如果输入框前面的标签已经删完了，return\n var tag = document.querySelector('.tag')\n if(!tag) { return }\n\n // 如果输入框当前没有内容，则删除前一个标签\n if (!input.value) {\n input.parentNode.removeChild(input.previousElementSibling)\n }\n }","html":"<div class=\"tag-input\">\n <span class=\"tag\">前端</span>\n <span class=\"tag\">编程题</span>\n <span class=\"tag\">示例</span>\n <span class=\"tag\">标签</span>\n <input type=\"text\" class=\"js-input\" maxlength=\"6\" placeholder=\"请输入标签\">\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 994ms, 内存消耗: 77860KB, 提交时间: 2021-07-13
{"css":".tag-input{\n position: relative;\n border: 1px solid #cccccc;\n padding: 0 5px;\n display: flex;\n flex-flow: row wrap;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 0;\n margin: 5px 0;\n outline: none;\n border: none;\n width: 6.5em;\n height: 24px;\n line-height: 24px;\n}\n.tag{\n padding: 0 10px;\n margin: 5px 5px 5px 0;\n background: #25bb9b;\n color: #ffffff;\n height: 24px;\n line-height: 24px;\n border-radius: 12px;\n font-size: 13px;\n}","js":"var tagInput = {\n isInited: false,\n init: init,\n bindEvent: bindEvent,\n addTag: addTag,\n removeTag: removeTag\n};\ntagInput.init();\n\nfunction init() {\n var that = this;\n if (that.isInited) return;\n that.isInited = true;\n // 请修改这一行代码，保存class为js-input的输入框的dom元素引用\n that.input = document.querySelector('.js-input');\n that.bindEvent();\n}\n\nfunction bindEvent() {\n var that = this;\n var input = that.input;\n if (!input) return;\n input.addEventListener('keydown', function (event) {\n // 请修改这一行代码，判断用户是否按了回车键\n var isEnter = false;\n // 请修改这一行代码，判断用户是否按了删除键\n var isDelete = false;\n\t\tvar code = event.keyCode || '';\n\t\t\n\t\tif(!{'8':1,'13':1}[code]) return;\n\t\tswitch(code){\n\t\t\tcase 13:\n\t\t\t\tisEnter = true;\n\t\t\t\tbreak;\n\t\t\tcase 8:\n\t\t\t\tisDelete = true;\n\t\t\t\tbreak;\n\t\t}\n\n (isEnter || isDelete) && event.preventDefault();\n isEnter && that.addTag();\n isDelete && that.removeTag();\n });\n input.parentNode.addEventListener('click', function () {\n input.focus();\n });\n}\n\nfunction addTag() {\n\tvar that = this;\n\tvar tags = document.querySelectorAll('.tag');\n\tvar va = that.input.value.trim();\n\tvar c = true;\n\tfor(var i = 0;i < tags.length;i++){\n\t\tif(tags[i].innerHTML == va){\n\t\t\tc = false;\n\t\t\tbreak;\n\t\t}\n\t}\n\tif(va == ''){\n\t\tconsole.log(1);\n\t\tc = false;\n\t}\n\tif(!c) return;\n\tvar tag = document.createElement('span');\n\ttag.className = 'tag';\n\ttag.innerHTML = va;\n\tdocument.querySelector('.tag-input').insertBefore(tag,that.input);\n\tthat.input.value = '';\n}\n\nfunction removeTag() {\n\tvar that = this;\n\tconsole.log(that.input.value);\n\tif(that.input.value.trim() == ''){\n\t\tvar tag = document.querySelectorAll('.tag');\n\t\tif(!tag.length) return;\n\t\ttag[tag.length - 1].remove();\n\t}\n\telse{\n\t\tthat.input.value = that.input.value.slice(0,that.input.value.length - 1);\n\t}\n}","html":"<div class=\"tag-input\">\n <span class=\"tag\">前端</span>\n <span class=\"tag\">编程题</span>\n <span class=\"tag\">示例</span>\n <span class=\"tag\">标签</span>\n <input type=\"text\" class=\"js-input\" maxlength=\"6\" placeholder=\"请输入标签\">\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1003ms, 内存消耗: 77864KB, 提交时间: 2021-07-03
{"css":".tag-input{\n position: relative;\n border: 1px solid #cccccc;\n padding: 0 5px;\n display: flex;\n flex-flow: row wrap;\n}\n.js-input{\n width: 450px;\n height: 22px;\n line-height: 22px;\n font-size: 16px;\n padding: 0;\n margin: 5px 0;\n outline: none;\n border: none;\n width: 6.5em;\n height: 24px;\n line-height: 24px;\n}\n.tag{\n padding: 0 10px;\n margin: 5px 5px 5px 0;\n background: #25bb9b;\n color: #ffffff;\n height: 24px;\n line-height: 24px;\n border-radius: 12px;\n font-size: 13px;\n}","js":"var tagInput = {\n isInited: false,\n init: init,\n bindEvent: bindEvent,\n addTag: addTag,\n removeTag: removeTag\n};\ntagInput.init();\n\nfunction init() {\n var that = this;\n if (that.isInited) return;\n that.isInited = true;\n // 请修改这一行代码，保存class为js-input的输入框的dom元素引用\n that.input = document.querySelector('.js-input');\n that.bindEvent();\n}\n\nfunction bindEvent() {\n var that = this;\n var input = that.input;\n if (!input) return;\n input.addEventListener('keydown', function (event) {\n // 请修改这一行代码，判断用户是否按了回车键\n var isEnter = event.keyCode===13;\n // 请修改这一行代码，判断用户是否按了删除键\n var isDelete = event.keyCode===8;\n\n (isEnter || isDelete) && event.preventDefault();\n isEnter && that.addTag();\n isDelete && that.removeTag();\n });\n input.parentNode.addEventListener('click', function () {\n input.focus();\n });\n}\n\nfunction addTag() {\n var that = this\n var tag = that.input.value.trim()\n \n if(tag==='') return\n \n that.input.value=''\n if(!Array.from(that.input.parentNode.querySelectorAll('span.tag')).find(el=>el.innerText===tag)){\n const el = document.createElement('SPAN')\n el.className='tag'\n el.innerText=tag\n that.input.parentNode.insertBefore(el,that.input)\n }\n\n}\n\nfunction removeTag() {\n var that = this\n if(that.input.value===''){\n const arr = Array.from(that.input.parentNode.querySelectorAll('span.tag'))\n if(arr.length>0){\n arr[arr.length-1].remove()\n }\n }\n}","html":"<div class=\"tag-input\">\n <span class=\"tag\">前端</span>\n <span class=\"tag\">编程题</span>\n <span class=\"tag\">示例</span>\n <span class=\"tag\">标签</span>\n <input type=\"text\" class=\"js-input\" maxlength=\"6\" placeholder=\"请输入标签\">\n</div>","libs":[]}