入力マスクの非表示と表示

Question

このソリューションを実行して入力マスクを非表示にすると、ページの読み込み時に両方の入力ボックスが表示されます。私のスクリプトは最後のスクリプトとしてページの一番下に置かれています。私は基本的に、チェックボックスに基づいて1つまたは他の入力ボックスを隠して表示しています。すべてが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

は試行錯誤の後、私は解決策を見つけました。最初に2番目の入力を非表示にするだけでした。

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

シンプルなソリューションです。私はそれを使いたい人のためにコードスニペットを修正しました。