Question

当运行此解决方案隐藏并显示输入掩码时，在页面加载时我看到两个输入框。我的脚本已作为最后一个脚本放在页面底部。我基本上隐藏并显示基于复选框的一个或另一个输入框。所有这些似乎都在jsfiddle和此代码片段上完美运行，但在Chrome，Android浏览器，Firefox和Safari上，两个输入框都显示在页面加载上。切换复选框后，它可以正常工作。不确定是什么原因导致它在页面加载时显示两个输入框。任何帮助都值得赞赏。

var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>0);
    if (showPass){
        $('#p').hide();
        $('#transaction_id').show();
    }else{
        $('#transaction_id').hide();
        $('#p').show();
    }
});

$('#p').change(function(){
    if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
    if (showPass) $('#p').val($('#transaction_id').val());
});

#transaction_id{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>

<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
  
  
  <input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
                                 
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
                                                    this.value = 'Saving...';
                                                    this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>

</div>

Answer 1

经过反复试验，我找到了解决方案。只需要最初隐藏第二个输入：

<input type="text" name="transaction_id" id="transaction_id" class="form-control" 
placeholder="(999) 999-9999" style="display:none" autofocus />

简单的解决方案。我还为想要使用它的人修复了代码片段。

隐藏和显示输入掩码

1 个答案: