규도자 개발 블로그

HTML input text value의 함정 (input value와 태그의 우선순위) 본문

HTML/CSS/JS/JavaScript

HTML input text value의 함정 (input value와 태그의 우선순위)

규도자 (gyudoza) 2019. 6. 6. 06:00

jQuery와 input text value의 함정

글의 요지를 먼저 말하자면, jQuery로 선택자.val();을 했을 때 값이 반환되기 마련인데 input text태그는 실제 텍스트박스에 입력된 값이 value 속성보다 우선순위를 갖는다. 이점을 모르고 혼동했던 경험(오늘 일)을 잊지 않기 위해서 이 글을 남긴다.

 

일단 테스트 소스코드는 다음과 같다.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

<h1>This is jQuery Test</h1>


<input type="text"
        id="testinput"
        value="">
<button id="testbutton">convert to A</button>
<button id="testbutton2">console.log testinput</button>
<button id="testbutton3">change attr</button>
<br>
<input type="text"
        id="testinput2"
        value="C">
<button id="testbutton4">change attr</button>
<button id="testbutton5">console.log testinput2</button>


<script>
    let testinput = jQuery('#testinput');
    let testinput2 = jQuery('#testinput2');

    jQuery('#testbutton').click(function (e) {
        testinput.val('A');
    });

    jQuery('#testbutton2').click(function (e) {
        console.log(testinput.val());
    });

    jQuery('#testbutton3').click(function (e) {
        testinput.attr('value', 'C');
    });

    jQuery('#testbutton4').click(function (e) {
        testinput2.attr('value', 'B');
    });

    jQuery('#testbutton5').click(function (e) {
        console.log(testinput2.val());
    });

</script>

https://jujumilk3.github.io/htmlinputtest/ 이곳에서 실제 실행되는 모습을 확인할 수 있다.


혹은 아래 코드샌드박스를 이용해도 된다. iframe환경에서는 console.log가 잘 작동하지 않으니 우측 하단 좌측의 새창 띄우기를 통해 실행해보는 걸 권고한다.




이런 화면인데 코드에서 알 수 있다시피 위의 인풋은 value속성을 초기화하지 않고 생성된다. 아래 인풋은 C라는 value속성을 가진 채로 생성된다. 이때 convert to A버튼을 누르면 위의 인풋박스에 A가 출력되는 것을 확인할 수 있을 것이다. 그리고 두번째 버튼, console.log testinput을 클릭하면 첫번째 인풋의 값 A가 console창에 뜨는 걸 확인할 수 있다.

이렇게 말이다. 여기에서 change attr을 눌러보자. 그러면 html로 봤을 땐 해당 태그에 C라는 값을 가진 value 속성이 추가된 것을 확인할 수 있다.



하지만 여전히 해당 인풋박스 안에는 A가 적혀져 있고 console.log testinput버튼을 클릭해봐도 A가 출력되는 것을 확인할 수 있다.

그렇다. input text는 현재 박스 안에 쓰여져 있는 값을 우선순위로 반환한다. value속성에 무엇이 담겨있든 상관하지 않는다.

 

반면 속성 안에 value="C"라는 속성으로 초기화한 두번째 인풋텍스트의 경우, 두번째 줄의 change attr버튼을 누르면 값이 같이 변한다.

이렇게 원래 C였던 값이

이렇게 B로 변한다.

console.log testinput2버튼을 눌러 콘솔에 출력해봐도 멀쩡하게 B가 출력된다.


하지만 해당 부분에 아무글자나 쓴 뒤에 마찬가지로 change attr버튼을 누르면

testinput2의 value속성은 B라는 값을 갖고 있지만 console.log testinput2버튼을 눌렀을 때에는

이렇게 아무글자가 출력된다.

결론

인풋텍스트는 value속성에 있는 값보다 현재 태그에 입력돼있는 값을 우선순위로 갖는다. HTML태그를 보고 작업할 때 value에 값이 없거나 이상한 값이 있어도 텍스트박스에 현재 입력된 값을 우선시하기 때문에 예상과 다른 결과가 출력될 수 있다. 그리고 현재 태그에 값이 입력돼있을 경우에는 value속성값을 아무리 바꿔도 입력돼있는 값을 반환한다.

Comments