KCP API결제 버전 배포 - exec() 불가 환경 대응KCP exec() 불가 대응 버전 배포
목록
다음
천

textarea 글자수 카운트 입니다.

혀니천사
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2016-01-05 (화) 11:12:21 · 2791 · 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-02-06 조회 3,585
16-02-04 조회 3,135
16-02-04 조회 3,411
16-02-04 조회 3,046
16-02-03 조회 3,203
16-02-03 조회 2,937
16-02-03 조회 2,988
16-02-03 조회 2,901
16-02-03 조회 3,020
16-02-02 조회 3,061
16-02-02 조회 2,946
16-02-02 조회 2,970
16-02-02 조회 2,860
16-02-02 조회 3,282
16-02-01 조회 2,864
16-02-01 조회 2,668
16-02-01 조회 2,644
16-01-31 조회 2,674
16-01-31 조회 2,682
16-01-31 조회 2,699
16-01-30 조회 3,093
16-01-30 조회 2,693
16-01-30 조회 2,685
16-01-30 조회 2,879
16-01-30 조회 2,993
16-01-30 조회 2,808
16-01-29 조회 2,676
16-01-29 조회 2,676
16-01-29 조회 2,566
16-01-29 조회 2,555
16-01-28 조회 3,005
16-01-28 조회 2,835
16-01-28 조회 2,510
16-01-28 조회 2,416
16-01-28 조회 2,655
16-01-27 조회 2,566
16-01-27 조회 2,561
16-01-27 조회 2,579
16-01-26 조회 2,560
16-01-26 조회 2,532
16-01-26 조회 2,556
16-01-26 조회 2,796
16-01-25 조회 2,570
16-01-25 조회 2,609
16-01-25 조회 2,617
16-01-25 조회 2,486
16-01-24 조회 2,486
16-01-24 조회 2,483
16-01-24 조회 2,410
16-01-23 조회 2,457
16-01-23 조회 2,472
16-01-23 조회 2,447
16-01-22 조회 2,582
16-01-22 조회 2,654
16-01-22 조회 2,595
16-01-22 조회 2,674
16-01-21 조회 2,701
16-01-21 조회 2,587
16-01-21 조회 2,570
16-01-21 조회 2,585
16-01-21 조회 2,539
16-01-20 조회 2,566
16-01-20 조회 2,486
16-01-20 조회 2,445
16-01-20 조회 2,443
16-01-19 조회 2,483
16-01-19 조회 2,515
16-01-19 조회 2,500
16-01-19 조회 2,537
16-01-19 조회 2,534
16-01-18 조회 2,518
16-01-18 조회 2,507
16-01-18 조회 2,530
16-01-18 조회 2,655
16-01-17 조회 2,689
16-01-17 조회 2,545
16-01-17 조회 2,619
16-01-16 조회 2,460
16-01-16 조회 2,393
16-01-16 조회 2,451
16-01-15 조회 2,607
16-01-15 조회 2,611
16-01-15 조회 2,527
16-01-15 조회 2,463
16-01-14 조회 2,612
16-01-14 조회 2,745
16-01-14 조회 3,193
16-01-14 조회 2,503
16-01-14 조회 2,739
16-01-14 조회 2,552
16-01-13 조회 2,807
16-01-13 조회 2,602
16-01-13 조회 2,567
16-01-13 조회 2,583
16-01-13 조회 2,476
16-01-12 조회 2,914
16-01-12 조회 2,653
16-01-12 조회 2,669
16-01-12 조회 2,585
16-01-11 조회 2,719
글쓰기