목록
다음
천

textarea 글자수 카운트 입니다.

혀니천사
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2016-01-05 (화) 11:12:21 · 2814 · 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-03 조회 3,027
15-07-30 조회 3,417
15-06-08 조회 5,555
15-05-27 조회 4,414
15-01-08 조회 6,714
14-12-30 조회 5,447
14-10-10 조회 5,437
14-08-13 조회 6,354
14-08-11 조회 5,208
14-08-06 조회 6,547
14-03-19 조회 7,437
13-04-26 조회 9,596
12-12-15 조회 5,117
12-12-15 조회 7,352
12-12-11 조회 5,492
12-11-21 조회 6,024
12-10-11 조회 5,104
12-10-03 조회 4,796
12-09-20 조회 6,094
12-09-02 조회 4,272
12-08-29 조회 5,279
12-08-29 조회 4,163
12-08-24 조회 4,261
12-08-18 조회 4,482
12-08-17 조회 4,527
12-08-16 조회 3,780
12-08-06 조회 5,556
12-08-05 조회 4,844
12-08-03 조회 4,561
12-08-03 조회 4,707
12-07-29 조회 3,561
12-07-24 조회 4,150
12-07-22 조회 3,615
12-07-20 조회 4,376
12-07-19 조회 4,718
12-07-19 조회 3,950
12-07-19 조회 3,896
12-07-19 조회 5,561
12-07-19 조회 3,505
12-07-18 조회 5,189
12-07-15 조회 4,171
12-07-14 조회 3,842
12-07-12 조회 4,515
12-07-11 조회 3,788
12-07-11 조회 3,510
12-07-11 조회 3,485
12-07-10 조회 4,672
12-07-09 조회 3,419
12-07-09 조회 4,238
12-07-09 조회 4,658
12-07-08 조회 4,572
12-07-07 조회 5,495
12-07-06 조회 4,749
12-07-06 조회 4,015
12-07-06 조회 3,901
12-07-06 조회 3,841
12-07-02 조회 5,518
12-07-02 조회 4,215
12-06-29 조회 3,735
12-06-28 조회 4,363
12-06-26 조회 3,858
12-06-26 조회 4,977
12-06-21 조회 3,955
12-06-20 조회 4,657
12-06-20 조회 4,293
12-06-15 조회 4,646
12-06-15 조회 4,382
12-06-13 조회 7,398
12-06-05 조회 7,370
12-06-04 조회 3,947
12-06-03 조회 3,798
12-05-31 조회 3,793
12-05-28 조회 6,638
12-05-27 조회 3,871
12-05-25 조회 4,005
12-05-23 조회 4,416
12-05-21 조회 5,127
12-05-17 조회 4,062
12-05-17 조회 3,977
12-05-09 조회 4,055
12-05-07 조회 4,314
12-05-02 조회 4,498
12-05-01 조회 4,677
12-04-30 조회 3,424
12-04-30 조회 4,370
12-04-25 조회 4,458
12-04-25 조회 4,881
12-04-24 조회 3,845
12-04-24 조회 4,616
12-04-23 조회 3,611
12-04-20 조회 3,267
12-04-17 조회 5,450
12-04-16 조회 4,386
12-04-14 조회 3,671
12-04-14 조회 3,700
12-04-14 조회 3,744
12-04-13 조회 3,374
12-04-13 조회 4,560
12-04-13 조회 6,203
12-04-12 조회 3,367
글쓰기