javascript - 在表单中输入数字时出现按钮

Question

从这个主题：如何使不可见的文本输入框在悬停时可见？

我读了这个问题，它对我有很大帮助，我得到了这段代码：

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

我的问题是，一旦我输入金额，我希望显示确认按钮。这可能吗？

提前致谢。

Answer 1

这应该完成你所追求的：

<!-- 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>

Answer 2

根据您的问题，我猜您希望在文本框中按下一个键后立即显示确认按钮。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/

Answer 3

实际制作“确认”按钮。

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