Question

我有tag.js用于添加密钥标记。只有在按下逗号按钮时才会添加标记。类似地，可以使用退格键删除标记。

我想用enter按钮添加标签？怎么做？我尝试使用键码13，我已将代码隐藏在js下面。

[].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
    let hiddenInput = document.createElement('input'),
        mainInput = document.createElement('input'),
        tags = [];
    
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', el.getAttribute('data-name'));

    mainInput.setAttribute('type', 'text');
    mainInput.classList.add('main-input');
    mainInput.addEventListener('input', function () {
        let enteredTags = mainInput.value.split(',');
        if (enteredTags.length > 1) {
            enteredTags.forEach(function (t) {
                let filteredTag = filterTag(t);
                if (filteredTag.length > 0)
                    addTag(filteredTag);
            });
            mainInput.value = '';
        }
    });

    mainInput.addEventListener('keydown', function (e) {
        let keyCode = e.which || e.keyCode;
        if (keyCode === 8 && mainInput.value.length === 0 && tags.length > 0) {
            removeTag(tags.length - 1);
        }

        // if (keyCode === 13 && mainInput.value.length === 1 && tags.length > 0) {
           
        // }


    });

    el.appendChild(mainInput);
    el.appendChild(hiddenInput);

    addTag('hello!');
     

    function addTag (text) {
        let tag = {
            text: text,
            element: document.createElement('span'),
        };

        tag.element.classList.add('tag');
        tag.element.textContent = tag.text;

        let closeBtn = document.createElement('span');
        closeBtn.classList.add('close');
        closeBtn.addEventListener('click', function () {
            removeTag(tags.indexOf(tag));
        });
        tag.element.appendChild(closeBtn);

        tags.push(tag);

        el.insertBefore(tag.element, mainInput);

        refreshTags();
    }

    function removeTag (index) {
        let tag = tags[index];
        tags.splice(index, 1);
        el.removeChild(tag.element);
        refreshTags();
    }

    function refreshTags () {
        let tagsList = [];
        tags.forEach(function (t) {
            tagsList.push(t.text);
        });
        hiddenInput.value = tagsList.join(',');
    }

    function filterTag (tag) {
        return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
    }
});

:root {
    font-family: Arial, Helvetica, sans-serif;
}

.tags-input {
    border: 1px solid #333;
    display: inline-block;
}

.tags-input .tag {
    font-size: 85%;
    padding: 0.5em 0.75em;
    margin: 0.25em 0.1em;
    display: inline-block;
    background-color: #ddd;
    transition: all 0.1s linear;
    cursor: pointer;
}

.tags-input .tag:hover {
    background-color: #3af;
    color: white;
}

.tags-input .tag .close::after {
    content: '×';
    font-weight: bold;
    display: inline-block;
    transform: scale(1.4);
    margin-left: 0.75em;
}

.tags-input .tag .close:hover::after {
    color: red;
}

.tags-input .main-input {
    border: 0;
    outline: 0;
    padding: 0.5em 0.1em;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Input Tags</title>
        <link rel="stylesheet" href="tags.css">
          <script src="tags.js"></script>
    </head>
    <body>
        <p>
            Enter some tags:
        </p>
        <p>
            <div class="tags-input" data-name="tags-input">
               <!--  <span class="tag">CSS<span class="close"></span></span>
                <span class="tag">JavaScript<span class="close"></span></span>
                <span class="tag">HTML<span class="close"></span></span> -->
            </div>
        </p>
          <script src="tags.js"></script>
    </body>
</html>

如何在按Enter键的同时添加其他标签？我希望代码类似于堆栈溢出中使用的标记功能。

提前致谢

Answer 1

我希望这会有所帮助。谢谢。

[].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
    let hiddenInput = document.createElement('input'),
        mainInput = document.createElement('input'),
        tags = [];
    
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', el.getAttribute('data-name'));

    mainInput.setAttribute('type', 'text');
    mainInput.classList.add('main-input');
    mainInput.addEventListener('input', function () {
        let enteredTags = mainInput.value.split(',');
        if (enteredTags.length > 1) {
            enteredTags.forEach(function (t) {
                let filteredTag = filterTag(t);
                if (filteredTag.length > 0)
                    addTag(filteredTag);
            });
            mainInput.value = '';
        }
    });

    mainInput.addEventListener('keydown', function (e) {
        let keyCode = e.which || e.keyCode;
        if (keyCode === 8 && mainInput.value.length === 0 && tags.length > 0) {
            removeTag(tags.length - 1);
        }

       if (keyCode === 13 && mainInput.value.length > 0 && tags.length > 0) {
             addTag(mainInput.value);
             mainInput.value ="";
        }


    });

    el.appendChild(mainInput);
    el.appendChild(hiddenInput);

    addTag('hello!');
     

    function addTag (text) {
        let tag = {
            text: text,
            element: document.createElement('span'),
        };

        tag.element.classList.add('tag');
        tag.element.textContent = tag.text;

        let closeBtn = document.createElement('span');
        closeBtn.classList.add('close');
        closeBtn.addEventListener('click', function () {
            removeTag(tags.indexOf(tag));
        });
        tag.element.appendChild(closeBtn);

        tags.push(tag);

        el.insertBefore(tag.element, mainInput);

        refreshTags();
    }

    function removeTag (index) {
        let tag = tags[index];
        tags.splice(index, 1);
        el.removeChild(tag.element);
        refreshTags();
    }

    function refreshTags () {
        let tagsList = [];
        tags.forEach(function (t) {
            tagsList.push(t.text);
        });
        hiddenInput.value = tagsList.join(',');
    }

    function filterTag (tag) {
        return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
    }
});

:root {
    font-family: Arial, Helvetica, sans-serif;
}

.tags-input {
    border: 1px solid #333;
    display: inline-block;
}

.tags-input .tag {
    font-size: 85%;
    padding: 0.5em 0.75em;
    margin: 0.25em 0.1em;
    display: inline-block;
    background-color: #ddd;
    transition: all 0.1s linear;
    cursor: pointer;
}

.tags-input .tag:hover {
    background-color: #3af;
    color: white;
}

.tags-input .tag .close::after {
    content: '×';
    font-weight: bold;
    display: inline-block;
    transform: scale(1.4);
    margin-left: 0.75em;
}

.tags-input .tag .close:hover::after {
    color: red;
}

.tags-input .main-input {
    border: 0;
    outline: 0;
    padding: 0.5em 0.1em;
}

<p>Enter some tags:</p>
<div class="tags-input" data-name="tags-input"></div>

标记键。如何在按下输入按钮的同时添加标记？

1 个答案: