목록
다음
천

textarea 글자수 카운트 입니다.

혀니천사
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2016-01-05 (화) 11:12:21 · 2796 · 1

index.html

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Input Counter</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="application.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="container">
            <form action="index.html" method="POST">
                <textarea></textarea>
                <span class="input-counter"></span>
                <input type="submit" id="input-submit" value="등록" />
            </form>
        </div>
    </body>
</html>


stylesheet.js

body {
    font-size: 12px;
    background: #FFF;
    color: #333;
    margin: 0;
}

#container {
    margin: 10px auto;
    width: 500px;
    padding: 10px;
    background: #CCC;
}

form {
    overflow: hidden;
    height: 100%;
}

textarea {
    display: block;
    width: 99%;
    height: 5.0em;
    margin-bottom: 0.5em;
}

span.input-counter {
    float: left;
    font-weight: bold;
    color: #000;
}

span.input-counter.disabled {
    color: #F00;
}

input#input-submit {
    float: right;
}


application.js

$(function() {
    var maxLength = 140;

    function updateInputCount() {
        var textLength = $('textarea').val().length;
        var count = maxLength - textLength;
        $('span.input-counter').text(count);
        if (count < 0) {
            $('span.input-counter').addClass('disabled');
            $('input#input-submit').prop('disabled', true);
        } else {
            $('span.input-counter').removeClass('disabled');
            $('input#input-submit').prop('disabled', false);
        }
    }

    $('textarea')
        .focus(updateInputCount)
        .blur(updateInputCount)
        .keypress(updateInputCount);
    window.setInterval(updateInputCount, 100);

    updateInputCount();
});

#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 1개

윤익수
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2016-02-24 (수) 10:15:08
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
16-06-11 조회 3,070
16-02-15 조회 3,299
16-02-02 조회 2,963
16-01-25 조회 2,579
16-01-18 조회 2,682
16-01-08 조회 2,600
16-01-07 조회 2,610
16-01-05 조회 2,649
16-01-05 조회 2,945
16-01-05 조회 2,770
16-01-05 조회 2,797
16-01-04 조회 2,663
16-01-04 조회 2,668
16-01-04 조회 2,618
16-01-04 조회 2,530
15-12-30 조회 2,882
15-12-24 조회 2,697
15-12-24 조회 2,693
15-12-24 조회 2,717
15-12-24 조회 2,674
15-12-23 조회 2,661
15-12-16 조회 2,756
15-12-15 조회 2,820
15-12-11 조회 2,945
15-12-10 조회 2,806
15-11-09 조회 2,788
15-11-09 조회 3,011
15-10-06 조회 3,347
15-10-02 조회 3,124
15-05-29 조회 4,457
15-02-02 조회 4,437
15-01-18 조회 4,412
14-10-25 조회 8,377
14-10-25 조회 5,153
14-10-22 조회 7,158
14-10-22 조회 4,864
14-10-22 조회 4,816
14-10-18 조회 5,686
14-10-17 조회 6,063
14-10-17 조회 5,440
14-10-17 조회 8,973
14-10-17 조회 6,452
14-10-13 조회 4,382
14-10-13 조회 4,476
14-10-07 조회 6,159
14-09-24 조회 3,924
14-09-23 조회 3,992
14-09-22 조회 4,895
14-09-22 조회 6,126
14-09-22 조회 4,094
14-09-22 조회 3,769
14-09-21 조회 4,378
14-09-21 조회 3,860
14-09-20 조회 3,865
14-09-20 조회 3,773
14-09-20 조회 3,948
14-09-19 조회 3,875
14-09-19 조회 4,038
14-09-19 조회 3,925
14-09-19 조회 4,310
14-09-19 조회 3,946
14-09-19 조회 3,872
14-09-19 조회 4,158
14-09-19 조회 3,891
14-09-19 조회 3,942
14-09-19 조회 3,925
14-09-18 조회 4,002
14-09-18 조회 3,958
14-09-18 조회 4,227
14-09-18 조회 4,191
14-09-18 조회 4,204
14-09-18 조회 4,905
14-09-18 조회 5,460
14-09-18 조회 5,346
14-09-18 조회 4,143
14-09-18 조회 4,640
14-09-18 조회 4,263
14-08-30 조회 5,530
14-08-06 조회 6,013
14-08-06 조회 5,631
14-08-03 조회 5,272
14-06-12 조회 5,543
14-05-11 조회 3,722
14-05-11 조회 4,483
14-05-11 조회 4,591
14-05-09 조회 1.3만
14-05-01 조회 5,185
14-03-30 조회 4,393
14-03-23 조회 8,015
14-02-12 조회 3,896
13-10-29 조회 7,858
13-10-28 조회 8,685
13-09-29 조회 6,651
13-09-29 조회 4,279
13-07-23 조회 5,157
13-07-23 조회 1.2만
13-07-14 조회 4,686
13-07-14 조회 5,075
13-07-14 조회 6,039
13-07-14 조회 5,316
글쓰기