这是用于进行输入标记的JS文件。我想将用户的输入限制为仅5个标签。我想在调用if
函数时做一个addTag()
语句,但它对我没有任何帮助。
这是我的网站的JavaScript,用于处理我网站的标记部分。
[].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
let hiddenInput = document.createElement('input'),
mainInput = document.createElement('input'),
tags = new Array(5);
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; let s=0;
if( enteredTags = mainInput.value.split(" ") ){
if(s<5){
if (enteredTags.length > 1 ) {
enteredTags.forEach(function (t) {
let filteredTag = filterTag(t);
if (filteredTag.length > 0)
addTag(filteredTag);
});
mainInput.value = '';
s++;
}
else if(s > 5)
{
alert("5 Tags Allowed");
}
}
}
});
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);
}
});
el.appendChild(mainInput);
el.appendChild(hiddenInput);
addTag('hello!');
function addTag (text) {
var size = 0;
var 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();
size++;
}
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, '-');
}
});
This is a glimpse of my site。
我想在标签框的搜索上添加标签。