[jQuery] textarea 글자수 카운트
트위터처럼 140자 제한이 있는 경우, 남은 글자수를 보여줍니다.
0보다 아래로 떨어지면 붉은 글씨로 바뀌고 submit을 할 수 없게 했습니다.
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();
});
0보다 아래로 떨어지면 붉은 글씨로 바뀌고 submit을 할 수 없게 했습니다.
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();
});
댓글 5개
14년 전
jQuery 1.7이 나왔는데 Google Libraries API 쪽에선 아직 제공하지 않는 것 같네요.
14년 전
제이쿼리 1.86 도 나왔는데요 ....
14년 전
jQuery와 jQuery UI는 서로 다르며, 버전 체계가 완전히 다릅니다.
둘의 관계는 예전에 많이 쓰였던 Prototype과 script.aculo.us의 관계와 유사하죠.
jQuery 1.7은 2011년 11월 3일에 나왔고,
jQuery UI 1.8.16은 2011년 6월 30일에 나왔습니다.
둘의 관계는 예전에 많이 쓰였던 Prototype과 script.aculo.us의 관계와 유사하죠.
jQuery 1.7은 2011년 11월 3일에 나왔고,
jQuery UI 1.8.16은 2011년 6월 30일에 나왔습니다.
13년 전
감사합니다.
드래그홈2
13년 전
굳
게시글 목록
| 번호 | 제목 |
|---|---|
| 14699 |
jQuery
jQuery SELECT 태그 관련 내용
1
|
| 2648 | |
| 14695 |
PHP
php 삽질 문의드려요~
3
|
| 2643 | |
| 14694 | |
| 2634 | |
| 24207 | |
| 29791 | |
| 14692 | |
| 29790 |
HTML
배경이미지 고정하기 스타일시트
|
| 29789 | |
| 29786 | |
| 14689 | |
| 26002 | |
| 25999 | |
| 25998 | |
| 25994 | |
| 2628 | |
| 14688 |
JavaScript
Apache 튜닝해서 사용하시는분 계신가요?
|
| 2624 | |
| 14686 |
MySQL
실력 있고 성실한 프로그래머 지원하세요
1
|
| 14682 | |
| 14676 | |
| 14673 |
MySQL
에러 해결.. 할수있을까여?
2
|
| 14670 |
MySQL
mysql 퀴리문 질문~
2
|
| 14666 |
MySQL
mysql 디비복구 전문이신분 급합니다
3
|
| 14660 |
JavaScript
if 문 질문드립니다...
5
|
| 29785 |
HTML
HTML5 elements
|
| 14658 | |
| 14657 | |
| 2606 | |
| 14654 | |
| 14651 |
JavaScript
도움이 필요합니다.
2
|
| 14647 | |
| 2578 | |
| 14645 | |
| 2568 | |
| 14643 |
기타
유니코드 한글 코드
1
|
| 24199 | |
| 2559 | |
| 2539 | |
| 14640 |
정규표현식
유효한 이메일주소 검사 정규표현식?
2
|
| 2536 | |
| 14639 | |
| 25989 | |
| 14636 | |
| 14633 | |
| 29783 |
HTML
한글 체크 함수
1
|
| 25982 |
계약서
홈페이지 유지보수계약서
6
|
| 2531 | |
| 25981 | |
| 25980 | |
| 25979 | |
| 24196 | |
| 24193 | |
| 24191 | |
| 2526 | |
| 14629 | |
| 2525 | |
| 2524 | |
| 2522 | |
| 2519 | |
| 25977 | |
| 2516 | |
| 25964 | |
| 24187 | |
| 14621 |
MySQL
DB없으면 생성 있다면 업데이트
7
|
| 14614 | |
| 25956 | |
| 25955 | |
| 14609 |
MySQL
MySQL 라이센스?
4
|
| 14602 |
jQuery
jQuery 메뉴(menu) 모음
6
|
| 25953 | |
| 14599 | |
| 14596 | |
| 14595 | |
| 14594 |
jQuery
jQuery 1.6.3 lib
|
| 29782 | |
| 2499 | |
| 2484 | |
| 24180 | |
| 14592 |
jQuery
개발자님에게 제이쿼리 질문좀 드립니다.
1
|
| 25952 | |
| 2478 | |
| 2466 | |
| 2460 | |
| 2459 | |
| 14589 | |
| 2456 | |
| 2436 | |
| 2420 | |
| 2403 | |
| 2397 | |
| 29778 |
HTML
질문드립니다.답답해죽겠습니다.
3
|
| 2393 | |
| 14586 |
JavaScript
중복 로그인 db로 못하게 하려고 하는데 괜찮은 방법있나요??
2
|
| 2387 | |
| 2384 | |
| 14581 |
기타
햬결좀부탁드릴게요.
4
|
| 2381 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기