[jQuery] 글자수 제한 기능 구현하기

[jQuery] 글자수 제한 기능 구현하기

트위터 혹은 게시판의 게시글을 작성할 경우 글자 입력에 제한이 있고, 얼만큼 글을 입력했는지 수치를 실시간으로 보여주는 경우가 많다. 그것을 찾다가. jquery 글자수 체크 - JSFiddle 이런 포스팅을 찾았는데 내가 사용해야 할 형태와는 조금은 달랐기에 좀 수정하였다.

① 남은 텍스트 입력양에 따라 숫자가 감소하는 경우

사실 이 코드는 그냥 jquery 글자수 체크 - JSFiddle 이거 그대로 라고 봐도 무방하다. 아래에 내가 필요로하는 걸 만들기 전에 그냥 테스트 해본거랄까?

textMinus.php

<html>
<head>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
    jQuery(function() {

        jQuery('#remaining').each(function() {

            var count = jQuery("#count", this);
            var maximumCount = count.text() * 1;

            var input = jQuery(this).prev();

            var update = function() {

                var before = count.text() * 1;
                var now = maximumCount - input.val().length;

                if (now < 0) {

                    var str = input.val();
                    alert('글자 입력수가 초과하였습니다.');
                    input.val(str.substring(0, maximumCount));
                }

                if (before != now) {

                    count.text(now);
                }
            };

            input.bind('input keyup paste', function() {

                setTimeout(update, 0)
            });

            update();
        });
    });
</script>
</head>
<body>

<div class="cont_area">
    <ul>
        <li>제목</li>
        <li><input type="text" id="imageTitle" name="imageTitle" style="width:453px;"/>
            <span id="remaining"> (<span id="count">30</span>/30)</span>
        </li>
    </ul>
</div>

</body>
</html>

출력결과(텍스트 입력 전)

출력결과(텍스트 입력 후)

② 남은 텍스트 입력양에 따라 숫자가 감소하는 경우

내가 필요로 하는건 얼만큼 썯는지를 나타내는 것이 었기에 실상은 이거다. 실제로도 이게 더 많이 필요할 거라 생각한다.

textPlus.php

<html>
<head>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">

    jQuery(function() {

        jQuery('#remaining').each(function() {

            var count = jQuery("#count", this);
            var max = jQuery("#max", this);

            var maximumCount = count.text() * 1;
            var maximumNumber = max.text() * 1;

            var input = jQuery(this).prev();

            var update = function() {

                var before = count.text() * 1;
                var now = maximumCount + input.val().length;

                if (now > maximumNumber) {

                    var str = input.val();
                    alert('글자 입력수가 초과하였습니다.');
                    input.val(str.substring(maximumNumber, 1));
                }

                if (before != now) {

                    count.text(now);
                }
            };

            input.bind('input keyup paste', function() {

                setTimeout(update, 0)
            });

            update();
        });
    });
</script>
</head>
<body>

<div class="cont_area">
    <ul>
        <li>제목</li>
        <li><input type="text" id="imageTitle" name="imageTitle" style="width:453px;"/>
            <span id="remaining">(<span id="count">0</span>/<span id="max">30</span>)</span>
        </li>
    </ul>
</div>

</body>
</html>

출력결과(텍스트 입력 전)

출력결과(텍스트 입력 후)

저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] jQuery 사용 (0)	2015.11.16
[jQuery] .each() loop 에서 빠져 나오기 (0)	2015.09.18
[jQuery] DIV로 레이어 팝업창 만들기 (0)	2015.07.25
[jQuery] 순차적 선택 (0)	2015.06.11
[jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현 (0)	2015.06.10

사악미소의 현대마법의 공방

[jQuery] 글자수 제한 기능 구현하기

'jQuery' 카테고리의 다른 글

티스토리툴바

[jQuery] 글자수 제한 기능 구현하기

'jQuery' 카테고리의 다른 글

'jQuery' Related Articles

티스토리툴바