Question

如果你看到我的JSFiddle（帖子的底部），当我从左边的输入框中删除标签时，我的主要问题出现了，它们没有从右边的框中删除，我不知道如何去做吧。

基本上我需要从第二个到最后一个逗号后面的输入框中删除一部分值。

我的问题更详细：

我正在以堆栈溢出的方式创建一个标记表单。

目前我有2个输入框。左边的那个是用户将使用的。当他们在此框中添加标签时，标签会在span标签中设置样式，因此看起来对用户友好。

同时，标签也会添加到右侧的输入框中（我将隐藏）。右侧的框必须用逗号分隔每个标记，因为这是表单提交时所需的格式。

我到目前为止，但问题是当我从第一个框中删除标签时，它们不会从右边的框中删除..我不确定该怎么做。也许我必须匹配字符串？

代码：

HTML：

<span id="tags"></span><input id="enterTag" type="text" />

<input id="hiddenbox" type="text"/>

JS：

$('#enterTag').keydown(function(event) {
    var tag = $(this).val();
    // 188 is comma, 13 is enter
    if (event.which === 188 || event.which === 13) {
        if (tag) {
            $('#tags').append('<span>' + tag + '</span>');
            $(this).val('');
           $('#hiddenbox').val($('#hiddenbox').val() + tag+', ');
        }
        event.preventDefault();
    }
    // 8 is backspace
    else if (event.which == 8) {
        if (!tag) {
            $('#tags span:last').remove();
            event.preventDefault();
        }
    }
});

JSFiddle：http://jsfiddle.net/greylien/pUfNu/9/

Answer 1

尝试

$('#enterTag').keydown(function(event) {
    var tag = $(this).val();
    // 188 is comma, 13 is enter
    if (event.which === 188 || event.which === 13) {
        if (tag) {
            $('#tags').append('<span>' + tag + '</span>');
            $(this).val('');
           $('#hiddenbox').val($('#hiddenbox').val() + tag+', ');
        }
        event.preventDefault();
    }
    // 8 is backspace
    else if (event.which == 8) {
        if (!tag) {
            $('#tags span:last').remove();
            var str = $('#hiddenbox').val();
            var str_a = str.split(',');
            str_a.pop();
            str_a.pop();
            if(str_a.length>0){
                var str_val = str_a.join(',')+', ';
            }else{
                var str_val = '';
            }
            $('#hiddenbox').val(str_val );
            event.preventDefault();
        }
    }
});

js fidle：

http://jsfiddle.net/pUfNu/11/

Answer 2

您可以使用正则表达式执行此操作，只需从字符串中删除最后一个段：

else if (event.which == 8) {
    if (!tag) {
        $('#tags span:last').remove();
        $("#hiddenbox").val($("#hiddenbox").val().replace(/,[^,]+,\s$/, ", "));
        event.preventDefault();
    }
}

Answer 3

$('#enterTag').keydown(function(event) {
    var tag = $(this).val();
    // 188 is comma, 13 is enter
    if (event.which === 188 || event.which === 13) {
        if (tag) {
            $('#tags').append('<span>' + tag + '</span>');
            $(this).val('');
            $('#hiddenbox').val($('#hiddenbox').val() + tag+', ');
        }
        event.preventDefault();
    }
    // 8 is backspace
    else if (event.which == 8) {
        if (!tag) {
            $('#tags span:last').remove();
            event.preventDefault();
            var s = $('#hiddenbox').val();
            l = s.lastIndexOf(',');
            s=s.substr(0,l);
            l = s.lastIndexOf(',');
            s=s.substr(0,l);
            $('#hiddenbox').val(s);
        }
    }
});

http://jsfiddle.net/alexgeorgiou/TdTZV/1/

jQuery从“输入”框中删除部分值

3 个答案: