Question

我对自己管理的网站有一些限制。

我无法添加任何其他库，如自定义jquery或javascript脚本。

我想为标签自定义输入，因此当用户按空格时，会添加新标签，但我只有权使用css。

所以我的问题是：我们可以得到与下图相同的结果，只能使用css吗？

所以当用户输入他的单词并按空格时，它会添加另一个标签。

enter image description here

这是我在那里找到的脚本：http://mbenford.github.io/ngTagsInput/

非常感谢任何帮助。

Answer 1

不，因为：

CSS cannot style substrings of text within an input element.
CSS cannot detect keypress events because it is only a style language.
CSS could add an "x" after a string for removing the tag（不使用输入元素），但由于第2点而未实际删除标记。
在输入元素中输入文本后，CSS无法维护/缩进占位符文本。

你几乎没有使用JavaScript。

Answer 2

我手上还有很多时间，我想做一个项目。由于您不允许使用库。您可以将其添加到网站，人们可以根据预定义的标签添加标签。您可以随时重建evaluateTagFunction以允许在您点击空格或输入后将每个文本添加为标记。

使用对数据库的AJAX调用更新evaluateTagFunction以从中检索标记。可能性是无穷无尽的。 TagInput是构造函数。要使用它，请使用new tagInput()创建新实例。

http://jsfiddle.net/71zox5vc/5/

var sampleTags = ["Superman", "Batman", "Aquaman", "Thor", "Spiderman", "Hulk", "Wolverine", "Professor-X"];

function tagInput()
{
    this.container = document.createElement("div");
    this.container.input = document.createElement("input");
    this.container.input.type = "text";
    this.container.input.className = "tag_input";
    this.container.appendChild(this.container.input);

    this.container.input.addEventListener("keyup", checkKeyUpOnTagInput(this), false);
    this.container.input.addEventListener("keydown", checkKeyUpOnTagInputDisable(this), false);

    this.container.inputHelp = document.createElement("div");
    this.container.inputHelp.className = "tag_helper";
    this.container.inputHelp.addEventListener("click", checkTagClickOnHelper(this), false);

    this.evaluateTag = evaluateTagFunction;
    this.deleteTag = deleteTagFunction;

    Object.defineProperty(this, "value", {
        value : [],
        enumerable : false
    });

    Object.defineProperty(this, "placeholder", {
        get : function(){this.container.input.placeholder;},
        set : function(value){this.container.input.placeholder = value;},   
        enumerable : false
    });

}

function checkTagClickOnHelper(obj, e)
{
    return function(e)
    {
        if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() == "span" && e.target.className == "tag_element")
        {
            obj.evaluateTag(e.target.childNodes[0].nodeValue);
        }
    }
}

function checkKeyUpOnTagInputDisable(obj, e)
{
    return function(e)
    {
        if (e.keyCode == 13 ||  e.keyCode == 32 )//either enter or space
        {
            obj.evaluateTag(e.target.value);
            e.preventDefault();
            return false;
        }
        else if (e.keyCode == 8) //backspace
        {
            if (e.target.value.length == 0 && obj.value.length > 0) //length of the input is zero.
            {
                //delete tag.
                obj.deleteTag();
                return true;
            }       
        }       
        else if (e.keyCode == 27) //escape
        {
            //hide the input helper and blur the input.
            e.target.blur();
            if (document.body.contains(obj.container.inputHelp))
            {
                document.body.removeChild(obj.container.inputHelp);
            }
            e.preventDefault();
            return false;       
        }
    };
}

function checkKeyUpOnTagInput(obj, e)
{
    return function(e)
    {
        //show suggestions
        showTagSuggestions(obj);
    };
}

function showTagSuggestions(obj)
{
    //user input can be very weird so escape all characters that could break a reg ex.
    var regExMatcher = new RegExp("^"+RegExp.escape(obj.container.input.value),"i");
    var objWrapper = [obj, regExMatcher]
    var matches = "";
    if (obj.container.input.value.length > 0)
    {
        var matches = sampleTags.filter(function(element, index, array){
            if (element.match(this[1]) && this[0].value.indexOf(element) == -1)
            {
                return element;
            }
        }, objWrapper);
    }

    if (matches.length > 0)
    {
        obj.container.inputHelp.innerHTML = "";
        document.body.appendChild(obj.container.inputHelp);
        obj.container.inputHelp.style.width = obj.container.offsetWidth + "px";
        obj.container.inputHelp.style.left = obj.container.offsetLeft + "px";
        obj.container.inputHelp.style.top = (obj.container.offsetTop + obj.container.offsetHeight) + "px";
        for (var i = 0; i < matches.length; ++i)
        {
            var node = createTag(matches[i]);
            node.removeChild(node.children[0]); //remove the delete button.
            obj.container.inputHelp.appendChild(node);
        }
    }
    else
    {
        if (document.body.contains(obj.container.inputHelp))
        {
            document.body.removeChild(obj.container.inputHelp);
        }   
    }
}

function deleteTagFunction(tag)
{
    if (!tag)
    {
        //delete the last tag
        var tag = this.value.length-1;
    }
    this.container.removeChild(this.container.querySelectorAll(".tag_element")[tag]);
    this.value.splice(tag, 1);
    if (this.value.length > 0)
    {
        var marginNode = parseInt(getComputedStyle(this.container.children[0]).getPropertyValue("margin-right"));
        var width = parseInt(this.container.children[0].offsetLeft) * 2; //default padding
        for (var i = 0; i < this.value.length; ++i)
        {
            //calculate the width of all tags.
            width += parseInt(this.container.children[i].offsetWidth) + marginNode;
        }
    }
    else
    {
        this.container.input.style.width = "100%";      
    }
    this.container.input.focus();
}

function deleteTagFunctionWrapper(obj, index, e)
{
    return function(){
        obj.deleteTag(index);
    }
}

function createTag(value)
{
    var node = document.createElement("span");
    node.className = "tag_element";
    node.innerHTML = value + "<span class='tag_remove_button'>&times;</span>";
    return node;
}

function evaluateTagFunction(tagValue)
{
    var isInArray = sampleTags.slice(0).map(function(element){return element.toLowerCase()}).indexOf(tagValue.toLowerCase());
    if (isInArray != -1)
    {
        //tag is in list, add it.
        var node = createTag(sampleTags[isInArray]);
        this.container.insertBefore(node, this.container.input);
        this.value.push(tagValue);
        node.children[0].addEventListener("click", deleteTagFunctionWrapper(this, this.value.length-1), false)
        var marginNode = parseInt(getComputedStyle(node).getPropertyValue("margin-right"));
        var width = parseInt(this.container.children[0].offsetLeft) * 2; //default padding
        for (var i = 0; i < this.value.length; ++i)
        {
            //calculate the width of all tags.
            width += parseInt(this.container.children[i].offsetWidth) + marginNode;
        }
        //set the width of the tag input accordingly.
        this.container.input.style.width = (this.container.offsetWidth - width) + "px";
        this.container.input.value = "";
        this.container.input.focus();
        if (document.body.contains(this.container.inputHelp))
        {
            document.body.removeChild(this.container.inputHelp);
        }
    }
}

RegExp.escape= function(s) {
    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};

适当的css：

    div.tag_builder{
        width: 300px;
        height: auto;
        background-color: #ffffff;
        border: 1px solid #777777;
        box-sizing: border-box;
    }

    .tag_helper{
        box-sizing: border-box;
        border: 1px solid #BBBBBB;
        padding: 4px 4px 4px 4px;
    }

    div.tag_helper{
        box-sizing: border-box;
        border: 1px solid #BBBBBB;
        border-top-width: 0px;
        padding: 10px 10px 10px 10px;
        position: absolute;
        background: white;
    }

    input.tag_input {
        padding: 8px 8px 8px 8px;
        border: 0px solid transparent;
        width: 100%;
        box-sizing: border-box;
        font-size: 11pt;
    }

    span.tag_element {
        display: inline-block;
        padding: 6px 10px 6px 10px;
        box-shadow: inset 0px 0px 2px 2px #EEEEEE;
        border: 1px solid #e2e2e2;
        margin-right: 4px;
        font-size: 10pt;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
    }

    span.tag_element > span.tag_remove_button{
        color: #000000;
        font-size: 10pt;
        white-space: nowrap;
        cursor: pointer;
        padding-left: 12px;
        font-size: 14px;
        font-weight: bold;
    }

    span.tag_element > span.tag_remove_button:hover {
        color: #660000;
        font-size: 10pt;
        white-space: nowrap;
        cursor: pointer;
        padding-left: 12px;
        font-size: 14px;
        font-weight: bold;  
    }

如何创建标记输入的实例：

var tagcreator = new tagInput();
document.body.appendChild(tagcreator.container);
tagcreator.container.className = "tag_builder";
tagcreator.placeholder = "Add a tag...";

我们可以只使用css为标签做输入吗？

2 个答案: