트위터처럼 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년 전
굳
게시판 목록
팁게시판
디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5727 |
잘살아보자
|
10년 전 | 478 | |
| 5726 | 10년 전 | 1050 | ||
| 5725 | 10년 전 | 1228 | ||
| 5724 | 10년 전 | 955 | ||
| 5723 |
잘살아보자
|
10년 전 | 432 | |
| 5722 |
잘살아보자
|
10년 전 | 404 | |
| 5721 |
잘살아보자
|
10년 전 | 388 | |
| 5720 |
잘살아보자
|
10년 전 | 380 | |
| 5719 |
잘살아보자
|
10년 전 | 457 | |
| 5718 |
잘살아보자
|
10년 전 | 578 | |
| 5717 |
잘살아보자
|
10년 전 | 830 | |
| 5716 |
잘살아보자
|
10년 전 | 359 | |
| 5715 |
starbros
|
10년 전 | 758 | |
| 5714 |
잘살아보자
|
10년 전 | 560 | |
| 5713 |
잘살아보자
|
10년 전 | 436 | |
| 5712 |
잘살아보자
|
10년 전 | 414 | |
| 5711 |
잘살아보자
|
10년 전 | 461 | |
| 5710 |
잘살아보자
|
10년 전 | 418 | |
| 5709 |
잘살아보자
|
10년 전 | 428 | |
| 5708 |
잘살아보자
|
10년 전 | 775 | |
| 5707 |
잘살아보자
|
10년 전 | 359 | |
| 5706 |
잘살아보자
|
10년 전 | 452 | |
| 5705 |
잘살아보자
|
10년 전 | 614 | |
| 5704 |
잘살아보자
|
10년 전 | 527 | |
| 5703 |
잘살아보자
|
10년 전 | 513 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기