상품 등록 시 태그 입력

<form name="fitemform" action="./itemformupdate.php" method="post" enctype="MULTIPART/FORM-DATA" autocomplete="off" onsubmit="return fitemformcheck(this)">

 

<?php include_once('stopbuy.php'); //태그를 저장할 여분 필드 ?>

<input type="hidden" name="it_7" id="it_7">
<div class="tagList">
    <div class="tagListIpt">
        <ul>
            <?
            if($it['it_7']){
                
                $tags = explode(',',$it['it_7']);
                for($i=0; $i<count($tags); $i++){
                    echo '<li class="tag">#<span>'.$tags[$i].'</span><i class="material-icons">clear</i></li>';
                }
            }
            ?>
            <li class="tabTxt"><input type="text" id="tagIpt" placeholder="아이디를 입력해주세요!" maxlength="15"></li>
        </ul>            
    </div>
</div>


</form>

 

<script>

function fitemformcheck(f)
{ inputTagList(); }

</script>

<script>

$(window).ready(function(){
    
    $(document).on('click','.tag > i',function(){
        $(this).parent().remove();
    });

 

    $("#tagIpt").on("keyup", function(event) {
        $(".tagListIpt ul li span").removeClass('overlap');
        if(event.keyCode == 32){
            $(this).val($(this).val().replace(/ /gi, ""));
            inputTag($(this).val());
        }
    });

});

function inputTagList(){
    var linCnt = $(".tagListIpt ul li.tag").length;
    var tag = '';
    for(var i=0; i<linCnt; i++){
        var j = i+1;
        if(!tag){
            tag = $(".tagListIpt ul li:nth-child("+j+") span").html();
        }else{
            tag += ','+$(".tagListIpt ul li:nth-child("+j+") span").html();
        }
    }
    tag = tag.replace(" ", "");
    console.log('after replace : '+tag);
    $("#it_7").val(tag);
}

function chkOverlap(a){
    var linCnt = $(".tagListIpt ul li.tag").length;
    var overlap = false;
    for(var i=0; i<linCnt; i++){
        var j = i+1;
        if(a == $(".tagListIpt ul li:nth-child("+j+") span").html()){
            $(".tagListIpt ul li:nth-child("+j+") span").addClass('overlap');
            overlap = true;
        }
    }

    return overlap;
}


function inputTag(a){
    
    a = a.replace(/ /g, '');
    
    var linCnt = $(".tagListIpt ul li.tag").length;
    
    if(chkOverlap(a) == false){

        if(linCnt < 30){
            var taghtml_ = '';
            
            taghtml_ += '<li class="tag">#<span>';
            taghtml_ += a;
            taghtml_ += '</span><i class="material-icons">clear</i></li>';    
            
            $(".tabTxt").before(taghtml_);
        }else{
            alert('아이디 입력은 최대 30개까지 가능합니다.');    
        }
        
        $("#tagIpt").val('');

    }
}    

</script>