0

静的 HTML ページを設計しています。2 つの入力フィールドと変更ボタンがあります。

<form name="formTextBox" method="post">

    <span id="departImage"> 
        <img src="images/FlightImg.png"> 
    </span>

    <span class="spanInputOne" id="spanInputOneId">
        <input type="text" maxlength="5" 
            class="textBox" id="departTextBox" name="txtDpt" /> 
    </span>

    <input type="image" src="images/SwitchMode.png" 
        class="centerButton" id="changeButton" 
        onclick="change()" value="change" />

    <span id="arrveImage"> 
        <img src="images/FlightImgDown.png"> 
    </span>

    <span class="spanInputTwo" id="spanInputTwoId">
        <input type="text" maxlength="5" 
            class="textBox" id="arrivalTextBox" name="txtArr"/>
    </span>

</form>

私がやりたかったのは、変更ボタンをクリックすると、テキストボックスが視覚的に別のボックス位置に移動する間、テキストフィールドの値が平均を交換することです。だから私は次のようにcss3アニメーション、javascriptを含めました

css3

.animation {
    position: relative;
    animation: swap .5s;
    -moz-animation:swap .5s; /* Firefox */
    -webkit-animation:swap 1s; /* Safari and Chrome */
}


@-moz-keyframes swap /* Firefox */
{
    0%   {left:0%; top:0%;}
    100% {left:50%; top:0%;}
}

@-webkit-keyframes swap /* Chrome and Safari */
{
    0%   {left:0%; top:0%;}
    100% {left:50%; top:0%;}
}


.animationOne {
   position: relative;
   animation: swapOne .5s;
   -moz-animation:swapOne .5s; /* Firefox */
   -webkit-animation:swapOne .5s; /* Safari and Chrome */ 
}

 @-moz-keyframes swapOne /* Firefox */
{
    0%   {right:0%; top:0%;}
    100% {right:48%; top:0%;}
}

 @-webkit-keyframes swapOne  /* Chrome and Safari */
{
    0%   {right:0%; top:0%;}
    100% {right:48%; top:0%;}
}

Javascript

function change() {

    var depart=document.getElementById("departTextBox").value;
    var arrive=document.getElementById("arrivalTextBox").value;

    $("span:eq(1)").addClass("animation");
    $("span:eq(3)").addClass("animationOne");

    document.formTextBox.txtDpt.value = arrive;
    document.formTextBox.txtArr.value = depart;   
}

テキスト ボックスは期待どおりにアニメーション化されています。ただし、アニメーションが完了すると、テキスト ボックスの値は消えます。誰か助けてくれませんか...

4

1 に答える 1

0

上記のプロジェクトの問題は、<form>, <input type="img">

テキストボックス、画像ボタン<input type="image" src="images/SwitchMode.png">は に含まれていたので、値を転記します。ページが更新されたので、データが利用できませんでした。

代わりに次のコードを使用しましたが、<input type="image" src="images/SwitchMode.png">動作します。

 <img src="images/SwitchMode.png" alt="Change" 
    class="centerButton" id="changeButton" 
    onclick="change()" value="change" />
于 2012-04-26T12:23:59.587 に答える