meterTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="meterTest.css" type="text/css">
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="meterTest.js"></script>
</head>
<body>
<form action="">
<p><label for="comment">입력</label></p>
<p><textarea name="comment" id="comment" rows="3" cols="40"></textarea></p>
<p>
<label>입력 문자 수:
<!-- 값에 따라 3가지의 유형으로 색이 변한다.
low값이 넘어가면 경고, high값이 넘어가면 위험하다는 경고를 색으로 표현해 준다.
지원 : CHROME, OPERA / 미지원: IE, SAFARI, FIREFOX -->
<meter min="0" max="51" low="40" high="50" optimum="0" value="0"></meter>
<output for="comment">0</output> <!-- 글자/50글자 -->
</label>
</p>
</form>
</body>
</html>
meterTest.js
$(document).ready(function() {
var textarea = document.querySelector('#comment');
// textarea에 input이벤트와 reset이벤트를 추가
textarea.addEventListener("input", count, false);
textarea.form.addEventListener("reset", formreset, false);
});
function count(e) {
// 이벤트가 발생한 객체 즉, textarea이다.
var textarea = e.target;
// 텍스트 영역에서 입력 문자 수
var num = textarea.textLength;
// 결과를 표시할 output 요소
var output = textarea.form.querySelector('output');
// 결과를 output 요소에 지정
output.value = num;
// output 요소를 지원하지 않는 브라우저를 위해 output 요소에서 컨텐츠를 다시 쓴다.
if (output.defaultValue == undefined) {
output.textContent = num;
}
// meter 요소를 업데이트
var meter = textarea.form.querySelector('meter');
meter.value = num > meter.max ? meter.max : num;
}
function formreset(e) {
}
응용본
- 오페라에서만 제대로 볼 수 있다.
meterTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="meterTest.js"></script>
</head>
<body>
<form action="">
<p><label for="comment">입력</label></p>
<p><textarea name="comment" id="comment" rows="3" cols="40"></textarea></p>
<p>
<label>입력 문자 수:
<!-- 값에 따라 3가지의 유형으로 색이 변한다.
low값이 넘어가면 경고, high값이 넘어가면 위험하다는 경고를 색으로 표현해 준다.
지원 : CHROME, OPERA / 미지원: IE, SAFARI, FIREFOX -->
<meter min="0" max="51" low="40" high="50" optimum="0" value="0"></meter>
<output for="comment">0</output>
<br/>글자<b>/50글자</b> <!-- 글자/50글자 -->
</label>
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
meterTest.js
$(document).ready(function() {
var textarea = document.querySelector('#comment');
// textarea에 input이벤트와 reset이벤트를 추가
textarea.addEventListener("input", count, false);
textarea.form.addEventListener("reset", formreset, false);
});
function count(e) {
// 이벤트가 발생한 객체 즉, textarea이다.
var textarea = e.target;
// 텍스트 영역에서 입력 문자 수
var num = textarea.textLength;
// 결과를 표시할 output 요소
var output = textarea.form.querySelector('output');
// 결과를 output 요소에 지정
output.value = num;
// output 요소를 지원하지 않는 브라우저를 위해 output 요소에서 컨텐츠를 다시 쓴다.
if (output.defaultValue == undefined) {
output.textContent = num;
}
// meter 요소를 업데이트
var meter = textarea.form.querySelector('meter');
meter.value = num > meter.max ? meter.max : num;
}
function formreset(e) {
// form 요소
var form = e.target;
var output = form.querySelector('output');
// output 요소를 지원하지 않는 브라우저를 위해 output 요소에서 컨텐츠를 다시 쓴다.
if (output.defaultValue == undefined) {
output.textContent = num;
}
// 0으로 초기화
var meter = form.querySelector('meter');
meter.value = 0;
}
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] jquery, ajax, oracle, xml 을 이용한 view (0) | 2019.05.27 |
|---|---|
| [HTML5/CSS3/JQUERY] input : 자료입력 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] image : 이미지 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] table : 테이블 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] menu : 메뉴 example (0) | 2019.05.22 |
