javascript - jQuery 从输入框中删除部分值

Question

如果您看到我的 JSFiddle(帖子底部)，我的主要问题发生在我从左侧输入框中删除标签时，它们没有从右侧框中删除，而且我不确定如何去解决它。

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

我的问题更详细:

我正在创建一个堆栈溢出样式的标签表单。

目前我有2个输入框。左边的是用户将使用的那个。当他们向此框中添加标签时，标签的样式采用跨度标签，因此看起来用户友好。

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

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

代码:

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 fiddle :

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