그누보드 QA - 게시판 내 태그 입력창 질문!

게시판 내 태그 입력창 질문!

coldwind222 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.03.14 21:42:37 조회 1121 (39.♡.♡.223)

본문

에디터 밑에 태그 입력창을 복사 붙여넣었습니다;; php 를 할줄 모르거든요ㅜ

이게 pc에서 스페이스바를 누르면 자동으로 #이 붙으면서 다시 태그를 추가할수있거든요.

근데 모바일에서는 스페이스바 콤마를 아무리 눌러도 바뀌는것 없이

스페이스바를 누르면 띄워쓰기 콤마를 누르면 콤마가 그냥 붙네요ㅜ

어떻게 해야 모바일에서도 스페이스바를 누르면 자동으로 #이 붙을까요ㅜ


<?
        include('script.php');
        //태그를 저장할 여분 필드
    ?>
    <input type="hidden" name="<?=$tagCol?>" id="<?=$tagCol?>">
    <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[$tagCol]){
                    
                    $tags = explode(',',$write[$tagCol]);
                    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>
    
    $(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>

#그누보드5 #태그

답변 1

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-03-15 00:28:28 221.♡.♡.6

다음 코드가 도움이 될지 모르겠습니다.


<!DOCTYPE html>
<html>
    <head>
        <style>
        .zone_hashtags {
            width: 50%;
            list-style-type: none;
        }
        .zone_hashtags li {
            margin: 0.2em;
        }
        .zone_hashtags textarea {
            width: 100%;
            height: 12em;
        }
        .zone_hashtags button {
            border-radius: 0.2em;
            background-color: orange;
            border: 0;
            padding: 0.4em 0.8em;
            color: #fff;
            float: right;
        }
        .zone_hashtags li::after {
            display: block;
            content: '';
            clear: right;
        }
        .hashtag {
            display: inline-block;
            border-radius: 0.2em;
            border: 1px solid #0969da;
            background-color: #ddf4ff;
            padding: 0.1em 0.2em;
            margin: 0.2em 0;
        }
        .hashtag::before {
            display: inherit;
            content: '#';
        }
        #tags {
            border: 1px solid gray;
            color: gray;
            padding: 0.5em;
            min-height: 2.2em;
        }
        #tags .hashtag:nth-child(n + 11) {
            border: 1px solid red;
            background-color: #ffe8dd;
        }
        </style>
        <script>
        function extract_hashtags(id_from, id_to) {
            var content_from = document.getElementById(id_from);
            var hashtag_to = document.getElementById(id_to);
            var hashtag = [];
            content_from.value.replace(/[^\s]+(?:\s|$)/g, function () {
                hashtag.push(arguments[0]);
            });
            var hashtag_edit = hashtag.map((v) => { return '<span class="hashtag">' + v + '</span>'; });
            var hashtag_html = hashtag_edit.join(' ');
            hashtag_to.innerHTML = hashtag_html;
        }
        </script>
    </head>
    <body>
        <ul class="zone_hashtags">
            <li>
                <textarea id="tagIpt" placeholder="태그를 입력해주세요!" onkeyup="extract_hashtags('tagIpt', 'tags')"></textarea>
            </li>
            <li>
                <button type="button" onclick="extract_hashtags('tagIpt', 'tags')">변환</button>
            </li>
            <li><div id="tags"></div></li>
        </ul>
    </body>
</html>