자바 키입력 이벤트 관련 문의드립니다.

자바 키입력 이벤트 관련 문의드립니다.

QA

자바 키입력 이벤트 관련 문의드립니다.

본문

3673019992_1649798935.6255.jpg

태그게시판 관련 자바 문의드립니다.

 

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

 

자바에 ㅈ 자도 모르는 초보입니다. 현재 스페이스바를 누르면 이벤트(한개의 태그입력완료)가 발생하게 되어있습니다.

저는 여기 그누보드 Q&A 게시판처럼 마우스로 다른 영역을 클릭했을때도 이벤트가 발생하기를 원하는데 초보만이 가능한 무한한 상상의 나래를 펴도 도저히 엄두가 안나네요. 일단 스페이스바를 엔터로 바꾸면 될까 싶어서 저 32를 13으로 변경해서 해봤는데 이벤트 발생보다 먼저 글이 등록되는 거 같습니다. 

 

사용하고자 하는 게시판은

jun31019님의

https://sir.kr/g5_skin/27608 태그게시판입니다. 

많이 까다로운 부분이라면 대충 어떤식으로 하라고 알려주시면

구글링 과 상상력을 동원해서 도전해보겠습니다.

 

아래는 전체 소스입니다. 감사합니다.

 

<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_2").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="fa fa-times" aria-hidden="true"></i></li>';    
                
                $(".tabTxt").before(taghtml_);
            }else{
                alert('태그틑 최대 10개까지 입력가능합니다.');    
            }
            
            $("#tagIpt").val('');

        }
    }    

</script>
    

 

이 질문에 댓글 쓰기 :

답변 3

keyup 이벤트 말고 focusout 이나 blur 이벤트 사용하셔야 됩니다.

덕분에 성공했습니다. 감사합니다. 좋은 하루되세요.

$('#tagIpt').blur(function(event) {
$(".tagListIpt ul li span").removeClass('overlap');
$(this).val($(this).val().replace(/ /gi, ""));
inputTag($(this).val());
});

맞는지는 모르겠지만 잘 작동하니 된듯합니다.;; 다시 한번 감사드립니다.

$(document).click(function(e){
    if (!$(e.target).is('#tagIpt')) {alert('문서 클릭 했네요');  }
});

-----------------------------------

용어부터 분명히 하세요

자바에 ㅈ 자도 모르는 초보입니다<--- java와 javascript는 완전히 다릅니다

javascript와 php가 완전히 다르듯이 Java또한 php 처럼 완전히 다른 언어입니다

자바라고 해놓아도 코드를 보면 알지만 자바스크립트를 자바라 부르는 것은 영구없~~~다

 

 

 

정말 감사합니다. 말씀하신대로 공부해보고 해결되면 글 남기겠습니다.

 

엔터랑 스페이스 같이 적용하는건 

if(event.keyCode == 13 || event.keyCode == 32)

이렇게 하고 입력폼을 input 에서 textarea 로 변경하니 되더군요. 구문이 맞는지는 모르겠지만

작동은 되서 문제가 없지 않나 싶습니다.;;;

 

답변을 작성하시기 전에 로그인 해주세요.
전체 69
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT