[ETC] JQ - 두 요소에 동시 입력 ★★★ (= Simultaneous Auto Multi Input)

keydowon (또는 change) 이벤트와 val() 메서드 활용.

[예제1] - b 입력 시, 자동으로 a에도 입력 (JS 스크립트 방식)

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<input type='text' value='' name='' id='a' class='' placeholder='a' readonly>

<input type='text' value='' name='' id='b' class='' placeholder='b'>

<script>

$("#b").keydown(function(){

    $('#a').val($(this).val());

});

$("#b").change(function(){

    $('#a').val($(this).val());

});

</script>

 

결과보기

---

[예제2] - b 입력 시, a에도 자동 입력 (HTML 속성 방식)

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<input type='text' value='' name='' id='a' class='' placeholder='a' readonly>

<input type='text' value='' name='' id='b' class='' placeholder='b' onkeyup="$('#a').val($(this).val())" onchange="$('#a').val($(this).val())">

 

결과보기

---

[예제3 ★] - a에 값 입력 시, b에 a값의 1/2 자동 입력

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<input type="text" id="a" name="a" onkeyup="homzzang();">

<input type="text" id="b" name="b">

<script>

function homzzang(){

    var val = $("#a").val() / 2;

    $("#b").val(val);

}

</script>

 

결과보기