0

私の JSFiddle (投稿の下部) が表示されている場合、左側の入力ボックスからタグを削除したときに主な問題が発生し、右側のボックスからタグが削除されず、どうすればよいかわかりません。それ。

基本的に、最後から 2 番目のカンマの後にある入力ボックスから値の一部を削除する必要があります。

私の問題をより詳細に：

スタック オーバーフローのスタイルでタグ フォームを作成しています。

現時点では、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/

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 fidle：

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 に答える