javascript - 如何从 "Tags box"获取值

Question

我有以下“标签框”代码:

HTML:

<div id="tags">
   <input type="text" value="" placeholder="Add a tag" />
</div>

JQuery:

$(document).ready(function(){
    $('#tags input').on('focusout',function(){
        var txt= this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g,'');
        if(txt) {
            $(this).before('<span class="tag">'+ txt.toLowerCase() +'</span>');
            $(this).before('<input>').attr({
                type: 'hidden',
                name: 'tags[]',
                value: txt.toLowerCase();
        }
        this.value="";
    }).on('keyup',function( e ){
    if(/(188|13)/.test(e.which)) 
        $(this).focusout();
    });
    $('#tags').on('click','.tag',function(){
        $(this).remove(); 
    });
});

我正在使用隐藏输入将标签发送到服务器。单击提交按钮后，表单将我重定向到另一个 .php 页面。我正在尝试使用 var_dump($_POST['tags']), 在 php 端访问，但结果是数组 (size=1) 0 => 字符串 '' (长度=0).

有人可以帮忙吗？

Answer 1

您可以使用隐藏输入将标签发送到服务器，这不会使任何输入在页面上可见，但会在您提交表单时发送。

$(document).ready(function(){
    $('#tags input').on('focusout',function(){
        var txt= this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g,'');
        if(txt) {
            $(this).before('<span class="tag">'+ txt.toLowerCase() +'</span>');
            $(this).before('<input>').attr({
                type: 'hidden',
                name: 'tags[]',
                value: txt.toLowerCase()
            });
        }
        this.value="";
    }).on('keyup',function( e ){
    if(/(188|13)/.test(e.which)) 
        $(this).focusout();
    });
    $('#tags').on('click','.tag',function(){
        $(this).remove(); 
    });
});

然后在 php 端访问 var_dump($_POST['tags']);。