웹마당넷 |[INPUT BOX] 동적으로 INPUT BOX 생성하기

Javascript Example

제 목

[INPUT BOX] 동적으로 INPUT BOX 생성하기

작성자

운영자

등록일

200809250112106

조회수

29,531

동적으로 INPUT BOX 생성하는 자바스크립트 소스입니다.

아래의 코드를 사이에 넣어 줍니다.

텍스트 박스의 갯수 :

<style type="text/css" rel="stylesheet">
   div, input {
    font-size:10pt;
   }
   input {
    border:1px solid #C0C0C0;
   }
</style>

<script type="text/javascript">
  <!--
   function CreateTextBox()
   {
    var count = document.all.txtCount.value;
 
    //숫자인지 아닌지를 판단 (isNaN : is not a Number의 약자)
    //숫자가 들어가면 false를 반환
    if (!isNaN(count))//숫자를 입력한다면...
    {
         //개체를 생성할때마다 누적시키려면 아래의 코드를 주석처리 하세요.
        document.getElementById("txtPanel").innerHTML = "";


         //자식으로 넣을 태그를 만듭니다. body에 <div></div>사이에 들어갑니다.
                for (i=0; i<count; i++)
                {
                    var txt = "<input type='text' size='30' onfocus='ChangeColor()' onblur='ChangeColor()'/><br />";
                    document.getElementById("txtPanel").innerHTML += txt;
                }
          }
   }
 
   function ClearTextBox()
   {
           document.getElementById("txtPanel").innerHTML = "";
   }
 
   function ChangeColor()
   {
        if  (event.type == "focus")
             event.srcElement.style.backgroundColor = "#FFFF00";
        else if (event.type == "blur")
             event.srcElement.style.backgroundColor = "white";
   }
  //-->
</script>

아래의 코드를 <body></body>사이에 넣어 줍니다.

<div style="border:1px solid gray; width:400px; height:20px; padding:5px;">
           텍스트 박스의 갯수 : <input type="text" name="txtCount" size="5" style="text-align:right;" />

           <input type="button" value="  생성하기  " onclick="CreateTextBox();" />
           <input type="button" value="  전체삭제  " onclick="ClearTextBox();" />
</div>
<div id="txtPanel"></div>

※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.

2프로

2016-07-06

이렇게 동적으로 만든 input박스에 각각 다른 name을 부여할 수 있는 방법이 있을까요?
예를 들면 ... 텍스트박스의 갯수를 5개라고 하고 생성하기 클릭하면
각각의 text박스의 name은
input1, input2, input3, input4, input5 이렇게 가능한지 궁금해지네요 ... ^^