5

私のウェブサイト用にstackoverflowのようなタグを作成しようとしています.私のウェブサイトのユーザーは、結果をフィルタリングするためのタグ、または検索、専門知識などの他の多くの操作のためのタグを作成します.

タグを作成できますが、stackoverflow のように入力ボックス内に表示できません。タグ間のマージンに問題があります。タグを作成するたびに整列されますが、スペースやマージンがありません。現在、スペースなしですべてのタグをインラインで表示しています。

試したjQuery-

$(function () {        
    $("#inputtext").keypress(function (e) {
        var valueofinput = $(this).val();
        if (e.which == 13) {
            $('.tag').html(valueofinput);
            $('.tag').show();
        }
    });

    $('.tag').click(function () {
        $(this).hide();
    });        
});

しかし、私はこのように入力タグで表示しようとしました-

if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32)     //for space
{
$('.tag').css('margin-left','5px');
}

しかし、これはうまくいきません。

ジャスフィドル

4

3 に答える 3

11

簡単な答え: できません/できません。でも、ありのままの姿を見せることはできます。

より長い答え:例

$(function(){    
    $("#inputtext").keypress(function(e){
        var valueofinput= $(this).val();
        if(e.which==13)
        {
            $('#inputtext').before('<span class="tag">' + valueofinput + '</span>');
            $('input').val('');
        }
    });
    $(document).on('click', '.tag', function(){
        $(this).remove();
    });
    $('.inputholder').click(function() { $('#inputtext').focus(); });
});
于 2013-07-30T04:54:39.653 に答える