使用按鈕將標簽添加到輸入字段

Question

我正在為Wordpress使用名為WP User Frontend的插件。 基本上，它允許用戶從網站的前端發布。

有一個功能允許用戶自己添加標簽，但是，這只是普通的輸入文本字段，我不希望他們創建無數的新標簽。

因此，基本上，我希望他們能夠單擊幾個按鈕，這會將標簽添加到輸入字段，同時也禁用他們的手動輸入。

Answer 1

您將需要一個腳本，用於將復選框輸入轉換為原始標簽輸入所需的任何格式（例如，用空格分隔的單詞字符串）。 這是一個示例腳本，該腳本既可以將復選框插入到原始輸入下方的頁面上，又可以將結果值放入原始字段中，以確保以相同的方式發布。 （如果不想顯示原始字段，則可以將其隱藏。） http://jsfiddle.net/zLVTp/8/

var tags = ['cows', 'sheep', 'dogs'],
    inp, label, ch = document.createElement('fieldset'),
    f = document.getElementById('tagField'); 
        // ^ The original input has id=tagField
f.readOnly = true;
for (var i = 0; i < tags.length; i++) {
    inp = document.createElement('input');
    label = document.createElement('label');
    label.innerHTML = tags[i];
    label.htmlFor = 'tag_' + tags[i];
    inp.type = "checkbox";
    inp.name = "tagSet";
    inp.className = 'tagCBs';
    inp.value = tags[i];
    inp.id = 'tag_' + tags[i];
    ch.appendChild(inp);
    ch.appendChild(label);
    inp.onchange = (function() {
        var th = inp;
        return function() {
            var sp, r = [];
            if (th.checked && f.value.indexOf(th.value) == -1) {
                if (f.value == '') f.value = th.value;
                else f.value += ' ' + th.value;
            }
            else if (!th.checked) {
                sp = f.value.split(' ');
                for (var j = 0; j < sp.length; j++) {
                    if (sp[j] != th.value) r.push(sp[j]);
                }
                f.value = r.join(' ');
            }
        }
    })();
}
f.parentNode.appendChild(ch);​

Answer 2

html復選框似乎符合您的需求，不是嗎？ 您必須修改表單並將文本區域替換為復選框（骯臟但簡單）