HTML5文章标签输入界面组件

Tags input control

html5, tags

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1885
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var TagsInput = function(element) {
    var self = this;
    var initChar = "\u200B";
    var initCharPattern = new RegExp(initChar, 'g');

var insert = function(element) {
        if (self.textNode) self.element.insertBefore(element, self.textNode);
        else self.element.appendChild(element);
    };

var updateCursor = function() {
        self.cursor = self.blank;
    };

if (event.keyCode !== 8) {
            if (self.selected) self.selected.removeAttribute('data-selected');
        }
        setTimeout(function() {
            updateCursor();
        }, 1);
    };

var focus = function() {
        updateCursor();
    };

Object.defineProperties(this, {
        element: {
            get: function() {
                return element;
            },
            set: function(v) {
                if (typeof v == 'string') v = document.querySelector(v);
                element = v instanceof Node ? v : document.createElement('div');
                if (!element.className.match(/\btags-input\b/)) element.className += ' tags-input';
                if (element.getAttribute('contenteditable') != 'true') element.setAttribute('contenteditable', 'true');

element.removeEventListener('keydown', keydown);
                element.addEventListener('keydown', keydown);

element.removeEventListener('focus', focus);
                element.addEventListener('focus', focus);
                this.text = initChar;
            }
        },
        tags: {
            get: function() {
                var element;
                var elements = this.element.querySelectorAll('span');
                var tags = {};
                for (var i = 0; i < elements.length; i++) {
                    element = elements[i]
                    tags[element.innerText] = element;
                }

return tags;
            }
        },
        lastChild: {
            get: function() {
                return this.element.lastChild;
            }
        },
        textNode: {
            get: function() {
                return this.element.lastChild instanceof Text ? this.element.lastChild : null;
            }
        },
        text: {
            get: function() {
                return this.textNode ? this.textNode.data : null;
            },
            set: function(v) {
                if (!this.textNode) this.element.appendChild(document.createTextNode(','));
                this.textNode.data = v;
            },
        },
        cursor: {
            get: function() {
                return this.element.getAttribute('data-cursor') !== null;
            },
            set: function(v) {
                if (v) this.element.setAttribute('data-cursor', '');
                else this.element.removeAttribute('data-cursor');
            }
        },
        focused: {
            get: function() {
                return document.activeElement == this.element;
            }
        },
        blank: {
            get: function() {
                return this.text.replace(initCharPattern, '') == '';
            }
        },
        selected: {
            get: function() {
                return this.element.querySelector('span[data-selected]');
            }
        }
    });

this.add = function(tag) {
        tag = tag.replace(initCharPattern, '');
        tag = tag.replace(/^\s+/, '').replace(/\s+$/, '');
        tag = tag[0].toUpperCase() + tag.toLowerCase().slice(1);
        if (tag != '' && this.tags[tag] === undefined) {
            var element = document.createElement('span');
            element.appendChild(document.createTextNode(tag));
            element.setAttribute('contenteditable', 'false');

insert(element);
        }
    };

this.remove = function(tag) {
        var element = this.tags[tag];
        if (element) this.element.removeChild(element);
    };

this.element = element;
};

var input = new TagsInput('.tags-input');

编译

CSS

html,
body,
main {
    height: 100%;
}
main {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
h1 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #bbb;
}
h1 span {
    border: 2px solid #dfdfdf;
    padding: 3px 2px 3px 7px;
    border-radius: 6px;
    font-weight: 400;
}
p {
    margin-top: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #71ccd5;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tags-input {
    border: 2px solid #dfdfdf;
    border-radius: 40px;
    height: 40px;
    padding: 0 11px;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    color: #888;
}
.tags-input span {
    background: #bbb;
    margin-right: 7px;
    color: #fff;
    padding: 4px 7px;
    border-radius: 20px;
}
.tags-input span[data-selected] {
    background: #71ccd5;
}
.tags-input::after {
    content: "";
    background: #888;
    width: 1px;
    height: 19px;
    margin: -1px 0 0 -1px;
    display: none;
    -webkit-animation: blink 0.5s infinite alternate;
    animation: blink 0.5s infinite alternate;
}
.tags-input:focus {
    border-color: #71ccd5;
    outline: none;
}
.tags-input:focus[data-cursor]::after {
    display: block;
}
@media screen and (max-width: 736px) {
    .tags-input:focus[data-cursor]::after {
        display: none;
    }
}
.tags-input:focus + h1 {
    color: #71ccd5;
}
.tags-input:focus + h1 span {
    border-color: #71ccd5;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

HTML

Tags input control

html5, tags

编辑器支持Emmet

快捷键

Tags input control

html5, tags

HTML5一款有趣智能的密码输入界面控件

HTML5带投票功能文章评论（讨论）列表界面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：