0

如果您看到我的 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/

4

3 回答 3

4

尝试

$('#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文件：

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

于 2012-12-23T22:47:47.613 回答
2

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

else if (event.which == 8) {
    if (!tag) {
        $('#tags span:last').remove();
        $("#hiddenbox").val($("#hiddenbox").val().replace(/,[^,]+,\s$/, ", "));
        event.preventDefault();
    }
}
于 2012-12-23T22:50:10.123 回答
2 
$('#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/

于 2012-12-23T22:51:02.070 回答