<?
        include('script.php');
        //태그를 저장할 여분 필드
 
    ?>
 
    <input type="hidden" name="wr_1" id="wr_1" value="<?php echo $write['wr_1'] ?>">
 
    <div class="tagList">
        <div class="tagListTit"><i class="material-icons">label</i> 태그입력<u>(최대15글자/10개/<b>spacebar</b>를 이용해 작성)</u>
        </diV>
        <div class="tagListIpt">
            <ul>
                <?
                if($write['wr_1']){
 
                    $tags = explode(',',$write['wr_1']);
                    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>
 
// script.php 
<script>
   
    $(window).ready(function(){
       
        $(document).on('click','.tag > i',function(){
            $(this).parent().remove();
        });
       
        $(".ppTag").click(function(){
            inputTag($(this).data('word'));
            return false;
        });
 
        $("#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);
        $("#wr_1").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 < 10){
                var taghtml_ = '';
               
                taghtml_ += '<li class="tag">#<span>';
                taghtml_ += a;
                taghtml_ += '</span><i class="material-icons">clear</i></li>';  
               
                $(".tabTxt").before(taghtml_);
            }else{
                alert('태그틑 최대 10개까지 입력가능합니다.');
            }
           
            $("#tagIpt").val('');
 
        }
    }  
 
</script>