hahahia

Javascript를 이용한 문자열 길이체크 및 입력제한 본문

Web Programming/JavaScript

Javascript를 이용한 문자열 길이체크 및 입력제한

hahahia 2012. 4. 4. 13:32


/* javascript.html */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

 </HEAD>

 <SCRIPT>

 var str;

 var length;

 str = document.getElementById("textarea").value; // textarea에서의 string을 받는다.

 function keyup() // keyup함수

 {

if(document.getElementById("textarea").value.length >= 80) // 문자열의 길이가 80이 넘어갈 경우

{

alert("overflow!!!"); // 초과 alert창을 띄운다

cleartext(); // 초기화시킨다

}

else // 그렇지 않을경우 leng(문자열 남은 길이)는 80에서 문자열의 길이를 뺸 것을 계산한다.

{

document.getElementById("leng").value = 80 - document.getElementById("textarea").value.length;

}

 }

 function clickon() // 클릭했을 경우 출력

 {

alert(document.getElementById("textarea").value);

 }

 function cleartext() // 초기화(텍스트 내용과 남은 길이값을 초기화)

 {

 document.getElementById("textarea").value = " ";

 document.getElementById("leng").value = "80";

 }

 </SCRIPT>

 <BODY>

  <TEXTAREA id="textarea" rows="5" cols="30" onkeyUp="keyup()"></TEXTAREA>

  <p> You have <input type="text" id="leng" value="80" readOnly> characters left.

  <p>

  <input type="button" value="Send!" onClick="clickon();">  <input type="button" value="Clear" onClick="cleartext();">

 </BODY>

</HTML>


- 실행시 화면창(textarea 폼에 입력)


- 입력을 하면서 동시에 남은 문자열 입력가능 개수를 출력한다.


- 입력하면서 80글자가 넘어갈 경우 overflow alert창을 띄운다.


'Web Programming > JavaScript' 카테고리의 다른 글

실습 01  (0) 2012.03.28
실습2  (0) 2012.03.28
JavaScript를 이용한 계산기 프로그램  (0) 2012.03.23
JavaScript를 이용한 BMI 지수 측정 소스코드  (0) 2012.03.14
JavaScript(alert, write, prompt)  (0) 2012.03.14
'Web Programming/JavaScript' Related Articles more
Comments