2

このトピックから：ホバー時に非表示のテキスト入力ボックスを表示するにはどうすればよいですか？

私はこの問題を読みました、そしてそれは私を大いに助けます、そして私はこのコードで来ました：

HTML：

<div id="box1">
    <form action="">
    <input type="string" name="amount" />
    </form>
</div>

CSS：

#box1 {
    width:100px;
    height:30px;
}

#box1:hover input {
    display:block;
    padding:3px;
}

#input {
    display:none;
}

私の問題は、金額を入力したら、確認ボタンを表示したいということです。これは可能ですか？

前もって感謝します。

4

3 に答える 3

5

これはあなたが求めていることを達成するはずです：

<!-- In the head of your document: -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').hide();
        $('#amount').keyup(function() {
            if ($(this).val() == '') {
                $('#submit').hide();
            }
            else {
                $('#submit').show();
            }
        });
    });
</script>

<!-- For your form in the body: -->
<div id="box1">
    <form action="">
        <input type="string" name="amount" id="amount" />
        <input type="submit" name="submit" id="submit" />
    </form>
</div>
于 2012-10-10T03:29:08.640 に答える
1

あなたの質問に基づいて、テキストボックスでキーが押されるとすぐに確認ボタンが表示されるようにしようとしていると思います。JQueryは、ブラウザイベントを処理するための非常に便利なライブラリです。これを使用することを検討する必要があります。

html：

<div id="box1">
   <input type="text"  id="txtAmount" />
   <input type="button" id="btnConfirm"  value="Confirm"/>
</div>

​

javascript / jquery：

//self invoking javascript function
$(function() {

    //hide the button on page load
    $('#btnConfirm').hide();


    //listen for a keypress event
    $('#txtAmount').on('keypress', function() {
        $('#btnConfirm').show();
    });
});​

試してみたい場合は、こちらがjsfiddleですhttp://jsfiddle.net/49Dhc/5/

于 2012-10-10T03:49:56.740 に答える
0

実際に「確認」ボタンを作成します。

<div id="box1">
     <form action="">
         <input type="string" name="amount" />
         <input type="submit" value="confirm" id="submit" style="display:none"/>
     </form>
</div>

「amount」という名前の要素が変更された場合、またはキーが押された場合（バックスペースの場合はonchange）、値が「」でないか何もない場合は、インラインcssを使用して送信ボタンが表示されます。

<script>
amount.onchange=amount.onkeyup=function(){
   document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>
于 2012-10-10T03:27:28.303 に答える