[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년 전
굳
게시글 목록
| 번호 | 제목 |
|---|---|
| 2372 | |
| 25946 | |
| 14575 |
jQuery
jquery 질문하나만 부탁드립니다.
5
|
| 2367 | |
| 29773 | |
| 2358 | |
| 2354 | |
| 2350 | |
| 29770 | |
| 29766 |
HTML
자바스크립트 정규식 질문 드립니다
3
|
| 24173 | |
| 2345 | |
| 25942 | |
| 25939 | |
| 29764 | |
| 14571 |
jQuery
jQuery 샘플자료들이 많군요
3
|
| 14567 | |
| 14561 |
JavaScript
css관련 질문입니다!
5
|
| 24172 | |
| 29763 | |
| 14556 |
JavaScript
관계연산자?
4
|
| 14550 |
JavaScript
select 를 스크립트 질문이요.
5
|
| 14549 | |
| 2332 | |
| 14544 | |
| 14535 |
JavaScript
php함수에 setTimeout 비스꾸무리한게 있나요?
8
|
| 14534 | |
| 14529 | |
| 2318 | |
| 2313 | |
| 2311 | |
| 14526 |
JavaScript
제로보드&그누보드 구별법
2
|
| 14522 | |
| 29761 | |
| 25938 | |
| 29759 |
HTML
소스가 안되서 질문을 좀 드려요
1
|
| 2297 | |
| 2281 | |
| 25936 | |
| 14521 | |
| 14514 |
MySQL
트렌젝션 문의
6
|
| 24167 | |
| 25935 | |
| 2266 | |
| 14513 |
JavaScript
특정사용자 소유의 모든파일 찾기
|
| 14512 | |
| 2257 | |
| 2230 | |
| 14511 | |
| 25926 |
계약서
유지보수 계약서
8
|
| 14503 | |
| 2224 | |
| 25922 | |
| 25920 | |
| 2211 | |
| 14500 | |
| 2209 | |
| 14499 | |
| 24158 | |
| 2204 | |
| 14491 | |
| 2197 | |
| 14490 |
jQuery
Jquery + me2day 검색
|
| 14489 |
jQuery
Jquery + me2day 검색
|
| 2189 | |
| 24155 | |
| 14487 |
MySQL
mysql 데이터 파일 체크하기
1
|
| 14486 | |
| 25916 | |
| 2185 | |
| 29757 |
HTML
제이쿼리 부문 질문입니다.
1
|
| 24154 | |
| 25913 | |
| 29755 | |
| 14484 | |
| 2181 | |
| 2164 | |
| 25907 | |
| 2163 | |
| 2153 | |
| 2149 | |
| 2145 | |
| 2130 | |
| 2116 | |
| 2107 | |
| 2103 | |
| 29753 | |
| 14483 |
JavaScript
view.skin.php 파일 하나 만들어 주시면 안될까요?
|
| 2099 | |
| 2039 | |
| 29750 | |
| 2021 | |
| 2015 | |
| 2006 | |
| 14482 | |
| 1989 | |
| 1972 | |
| 1969 | |
| 14481 | |
| 1963 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기