테스트 사이트 - 개발 중인 베타 버전입니다
SIR

textarea 글자수 카운트 입니다.

개발자 jquery
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 9년 전 · 352 · 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();
});

목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 1개

윤익수
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전
감사합니다.

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

알고있으면 유용한 무료 디자인소스 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버시간 알아내기

#개발자 #javascript
PPlayPixel
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css 템플릿 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

모바일 ui 사이트 [1]

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현

#퍼블리셔 #기타
돼지코구뇽
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

숫자를 한글표기로 바꾸기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Android,IOS 앱용 아이콘 템플릿 참고 사이트

#개발자 #mobile
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

여러문장을 한번에 자동 줄바꿈 하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버 동시접속자 설정 변경하기

#개발자 #웹서버
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수

#개발자 #php
뿌뿌하하
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간단하게 자동으로 테이블 너비 조정하기 입니다. [1]

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열자르기 (문자별 다른 너비 해결)

#개발자 #php
PPASKRAN
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

테이블 복사 쿼리

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

많이들 사용하시는 Slider 에 대해서... [2]

#퍼블리셔 #기타
kkiplayer
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

현재 접속중인 사용자 나타내기

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql select 후 update 하기

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

다른 페이지로 이동하는 방법 3가지 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

한글문자열 자르는 법 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql_query 전체 갯수 빨리 알아보기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

POST값 통째로 인코딩하기, 배열, iconv

#개발자 #php
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

이메일주소 검사하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

php 확장자 내 맘대로 바꾸기 입니다.

#개발자 #웹서버
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열을 한 문자씩 나누어 출력하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Node js 게시판 프로젝트 소개합니다.

#개발자 #node.js
ssnshero
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전