입력한 문자를 실시간으로 반영하는 방법

📗 완성형

📗 코드

  <form id="form_test">

    <div id="input_value_box"></div>   //inputされた情報が入る場所

    <input type="text" name ="input_value" value="">
 </form>

//inputに入力したらdivタグに文字が反映される


const formTestInputValue = document.forms.form_test.input_value; //document.formsでformの中身を取得,さらに後ろの記述で細かく指定できる


formTestInputValue.addEventListener('input',()=>{     //formTestInputValueにinputがされたら
  let inputValueBox  = document.getElementById('input_value_box');//input_value_boxのidを検索して
  inputValueBox.textContent = formTestInputValue.value  //inputValueBoxのtextcontentにformTestInputValueのvalueをくっつける
})

📗 덤 【문자가 아니라 입력 수를 표시하고 싶을 때】

inputValueBox.textContent = formTestInputValue.value.length