JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2008.05.30 / 19:18

텍스트 필드에 색상을 입히는 방법

커넥터
추천 수 268
제목없음


 CSS 속성중 background-color를 이용하면 그 속성을 사용하는 객체의 배경색을 변경할 수가 있다. 텍스트 필드의 배경색을 변경하는 가장 간단한 방법은 <input> 태그의 style 속성에서 background-color에 원하는 색상 값을 입력하는 것이다. 다음은 그 예이다.

위 텍스트 필드의 HTML 코드는 다음과 같다.

<input type="text" value="배경색이 오렌지 색입니다!" style="background-color:orange">

이 배경색을 동적으로 변경하려면 자바스크립트를 이용한다. 이 때 문법은 다음과 같다.

object.style.backgroundColor = colorValue

여기서 colorValue는 색상 코드 또는 색상에 해당하는 이름을 의미한다. backgroundColor 속성은 넷스케이프 4 및 인터넷 익스플로러 4 이상에서 모두 지원하지만 폼 요소의 색상을 동적으로 변경하는 것은 인터넷 익스플로러에서만 가능하다.

실제 폼 요소의 색상 변경을 위해 자바스크립트를 활용한 예를 살펴보도록 하자. 아래 이름과 나이란 텍스트 필드가 있는데 각각에 대해 아무 값도 입력하지 않고 "확인" 버튼을 클릭하면 입력하지 않은 텍스트 필드의 배경색이 변하는 것을 볼 수 있을 것이다. 직접 테스트 해보기 바란다. (인터넷 익스플로러 4 이상에서만 색상이 변경된다.)

이름:
나이:

위 예제에 대한 소스 코드는 다음과 같다.

<SCRIPT language=JavaScript>
<!--
function setColor(objFormElement, bgColor) {
  if (objFormElement.style)
       objFormElement.style.backgroundColor = bgColor;
}
 
function checkInput(objForm) {
  var valid = true;
  if (objForm.name.value == "") {
    valid = false;
    setColor(objForm.name, "orange");
  } else {
    setColor(objForm.name, "white");
  }
  if (objForm.age.value == "") {
    valid = false;
    setColor(objForm.age, "#EFEFEF");
  } else {
    setColor(objForm.age, "white");
  }
  if (!valid)
    alert("텍스트 필드의 내용을 모두 입력해야 합니다!")
  else
    alert("정상적으로 처리했습니다!");
}
 
// -->
</SCRIPT>
 
<FORM>
이름: <INPUT size=30 name="name"><BR>
나이: <INPUT size=30 name="age"><BR>
<INPUT onclick=checkInput(this.form) type=button value="확인">
</FORM>