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.
3 Antworten
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>
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/
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>