천

textarea 글자수 카운트 입니다.

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();
});

|

댓글 1개

댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
16-01-11 조회 2,597
16-01-11 조회 2,413
16-01-11 조회 2,626
16-01-08 조회 2,810
16-01-08 조회 2,572
16-01-07 조회 2,583
16-01-05 조회 2,645
16-01-05 조회 2,622
16-01-05 조회 2,915
16-01-05 조회 2,735
16-01-05 조회 2,776
16-01-04 조회 2,628
16-01-04 조회 2,641
16-01-04 조회 2,596
16-01-04 조회 2,506
16-01-03 조회 3,338
16-01-03 조회 2,651
16-01-03 조회 2,921
16-01-02 조회 2,856
16-01-02 조회 2,598
16-01-02 조회 2,706
16-01-02 조회 2,488
16-01-01 조회 2,781
16-01-01 조회 2,707
16-01-01 조회 2,787
15-12-31 조회 2,565
15-12-31 조회 3,278
15-12-31 조회 2,872
15-12-31 조회 2,897
15-12-31 조회 2,706
15-12-30 조회 2,645
15-12-30 조회 3,212
15-12-30 조회 2,849
15-12-30 조회 2,742
15-12-30 조회 2,653
15-12-30 조회 2,568
15-12-29 조회 2,595
15-12-29 조회 2,793
15-12-29 조회 2,898
15-12-29 조회 2,615
15-12-28 조회 2,626
15-12-28 조회 2,652
15-12-28 조회 2,683
15-12-28 조회 2,529
15-12-27 조회 3,197
15-12-27 조회 2,655
15-12-27 조회 2,556
15-12-27 조회 2,619
15-12-26 조회 2,576
15-12-26 조회 2,653
15-12-26 조회 2,668
15-12-25 조회 3,354
15-12-25 조회 2,540
15-12-25 조회 2,545
15-12-25 조회 2,497
15-12-24 조회 3,040
15-12-24 조회 2,663
15-12-24 조회 2,669
15-12-24 조회 2,693
15-12-24 조회 2,646
15-12-23 조회 2,811
15-12-23 조회 2,628
15-12-23 조회 2,501
15-12-23 조회 2,635
15-12-23 조회 2,580
15-12-22 조회 2,762
15-12-22 조회 2,624
15-12-22 조회 2,604
15-12-22 조회 2,510
15-12-21 조회 2,545
15-12-21 조회 2,575
15-12-21 조회 2,549
15-12-20 조회 2,596
15-12-20 조회 2,764
15-12-20 조회 2,534
15-12-19 조회 2,619
15-12-19 조회 2,610
15-12-19 조회 2,617
15-12-18 조회 2,919
15-12-18 조회 2,591
15-12-18 조회 2,579
15-12-18 조회 2,551
15-12-17 조회 2,622
15-12-17 조회 2,541
15-12-17 조회 2,555
15-12-17 조회 2,524
15-12-16 조회 2,534
15-12-16 조회 2,569
15-12-16 조회 2,513
15-12-16 조회 2,720
15-12-15 조회 2,858
15-12-15 조회 2,791
15-12-15 조회 2,519
15-12-15 조회 2,518
15-12-15 조회 2,511
15-12-14 조회 2,580
15-12-14 조회 2,665
15-12-14 조회 2,491
15-12-13 조회 2,457
15-12-13 조회 2,502