0

テキストボックス間でテキストを移動しようとしていますが、失敗しました。このアプローチの何が問題になっていますか。

 <html>
<script>
function fill(){
document.getElementById("text2").value = document.test.text1.value 
}
</script>

<form name="test" id="test">
<input type="text" name="text1" id="text1"/>
<input type="text" name="text2" id="text2" value=""/>
<button name="b" onclick="fill()">move</button>
</form>
</html>
4

1 に答える 1

1

1つの理由は、ボタンがフォームを送信していることです。それを抑える必要があります。また、インライン（別名DOMゼロ）イベント宣言を避け、イベントをより正式にバインドします。

function fill(evt){
    document.getElementById("text2").value = document.test.text1.value;
    evt.preventDefault();
}
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#test button').addEventListener('click', fill, false);
}, false);

私はそこでいくつかの最新の方法を使用しているので、古いIEをサポートする必要がある場合はそれを微調整する必要があるかもしれませんが、あなたはその考えを理解しています。

また、fill関数がこのボタンにのみ使用され、他の場所では使用されていない場合は、ここで行うように名前で定義して参照する代わりに、イベントバインディングで匿名関数として直接参照できることにも注意してください。詳細については、「匿名関数」を検索してください。

于 2012-06-30T20:27:49.567 に答える