当第一个字母放入输入字段时，提交按钮应该弹出

Question

我正在制作表单，希望在用户输入第一个字母时弹出提交按钮。

Javascript 部分:

$('#cams_email').blur(function()
 {
    if(!$('cams_email').val())
    {
        $('#cams_submit').hide();
    }
    else
        $('#cams_submit').show();;
});

HTML 部分:

<div class="form-row form-group" id="cams_section" style="display: none;">
  <label class="col-md-5">
    <h5>Email ID<span class="form-required">*</span></h5>
  </label>
  <div class="col-md-7" id="cams_e">
    <input type="email" name="cams_email" id="cams_email" class="form-control">
  </div>
</div>
<button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>

Answer 1

您可以在下面的代码片段中看到工作示例。您将 keyup 事件添加到您的输入中，当事件被触发时，您检查是否写入了某些内容（当 .val() 不为空时），如果是这样，您删除 display: none 来自提交按钮。

$("#cams_email").on("keyup", function(){
 if(!($(this).val() === '')){
     $("#cams_submit").css("display", "block");
 }
 else{
     $("#cams_submit").css("display", "none");
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row form-group" id="cams_section">
                                <label class="col-md-5">
                                    <h5>Email ID<span class="form-required">*</span></h5>
                                </label>
                                <div class="col-md-7" id="cams_e">
                                    <input type="email" name="cams_email" id="cams_email" class="form-control">
                                </div>
                            </div>
                           </div>
                            <button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>

Answer 2

在条件检查空值的情况下，我最好使用 jQuery toggle()。

$(document).ready(function(){

$('#cams_email').on('blur keyup',function(){
$('#cams_submit').toggle($(this).val()!='');
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row form-group" id="cams_section">
                            <label class="col-md-5">
                                <h5>Email ID<span class="form-required">*</span></h5>
                            </label>
                            <div class="col-md-7" id="cams_e">
                                <input type="email" name="cams_email" id="cams_email" class="form-control">
                            </div>
                        </div>
                        </div>
                        <button type="submit" id="cams_submit" style="display: none;">Submit Cams Data</button>

当第一个字母放入输入字段时，提交按钮应该弹出

When the first letter is put in the input field the submit button should pop up

html

jquery

input

popup