Question

从这个主题：how do i make an invisible text input box visible on hover?

我读了这个问题，这对我有很大的帮助，我带来了这段代码：

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

如果您想尝试http://jsfiddle.net/49Dhc/5/

，这里是jsfiddle

Answer 3

实际上做出＆＃34;确认＆＃34;按钮。

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

任何时候名字＆＃34;金额＆＃34;如果值不是＆＃34;＆＃34;则更改或按下一个键（onspace for backspaces）或者没有，然后它会使用内联css显示提交按钮。

<script>
amount.onchange=amount.onkeyup=function(){
   document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>

在表单中输入数字时显示按钮

3 个答案: