Aus diesem Thema: Wie mache ich ein unsichtbares Texteingabefeld beim Hover sichtbar?

Ich habe dieses Problem gelesen und es hilft mir sehr und ich kam mit diesem Code:

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;
}

Mein Problem ist, dass nach Eingabe des Betrags die Bestätigungsschaltfläche angezeigt werden soll. Ist das möglich?

Danke im Voraus.

2
Jac Kellie 10 Okt. 2012 im 07:14

3 Antworten

Beste Antwort

Dies sollte das erreichen, wonach Sie suchen:

<!-- 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>
5
zachjs 10 Okt. 2012 im 03:29

Aufgrund Ihrer Frage möchten Sie vermutlich die Bestätigungsschaltfläche anzeigen, sobald eine Taste im Textfeld gedrückt wird. JQuery ist eine sehr hilfreiche Bibliothek für die Behandlung von Browserereignissen. Sie sollten sich damit befassen.

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();
    });
});​

Hier ist die jsfiddle, wenn Sie sie ausprobieren möchten http://jsfiddle.net/49Dhc/5/

1
WhizBang 10 Okt. 2012 im 03:49

Machen Sie tatsächlich die Schaltfläche "Bestätigen".

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

Jedes Mal, wenn das Element mit dem Namen "Betrag" geändert oder eine Taste gedrückt wird (beim Ändern von Leerzeichen), wenn der Wert nicht "" oder nichts ist, wird die Schaltfläche "Senden" mithilfe von Inline-CSS angezeigt.

<script>
amount.onchange=amount.onkeyup=function(){
   document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>
0
JJJ 10 Okt. 2012 im 03:27