如何填寫特定的輸入字段才顯示div（但未提交）？

Question

相對較新的HTML編碼，並非常新的JavaScript。在這個頁面上，我不希望選擇通過電子郵件發送編輯器，直到填入tripID（但尚未提交表單）爲止。這裏是形式至今無該選項尚未加入：

     TripID:      
 
<input type='text' id='atripid' name='atripid' size='6' maxlength='6' /><br><br> 
 

 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Port:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<input type='text' id='aport' name='aport' size='6' maxlength='6' /><br><br> 
 

 
<div id=acheckbox><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail editor?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> 
 
<input type='checkbox' name='acheck' onchange='copyTextValue(this);'/><br> 
 

 

 
<div id='div' style='display:none'> 
 

 
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Subject:</b>&nbsp;&nbsp;<input type='text' id='asubject' name='asubject' size='70' maxlength='75'/><br><br> 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea name='aemailbody' cols='85' rows = '10'>Explain any packaging or labeling mistakes here...</textarea> 
 

 
</div> 
 
    </div> 
 
    
 
    
 
    <script> 
 

 
function copyTextValue(bf) { 
 
     
 
       if(bf.checked){ 
 
     
 
         document.getElementById('div').style.display = 'block'; 
 
         var atext = 'Frozen Sample Error Notice: '+ document.getElementById('atripid').value; 
 
       }else{ 
 
         document.getElementById('div').style.display = 'none'; 
 
         var atext = ''; 
 
       } 
 
    
 
       document.getElementById('asubject').value = atext \t 
 
       } 
 

 
    </script> 
 

 
</div>

我們隱藏電子郵件編輯器選項，直到TRIPID填充，我有這樣的事情對jfiddle工作：

<form action=""> 
 

 
    tripid:<input type="atripid" id="atripid" value=""> 
 
     
 
     port:<input type="aport" id="aport" value=""> 
 

 
</form> 
 

 
<div id="acheckbox" style="display:none"> 
 
    <br><br><br> 
 
    This is where the email options (subject and textbox) would appear. 
 
    
 
</div> 
 
    
 
    
 
<script> 
 
    $("#atripid").keyup(function(){ 
 
    if($(this).val()) { 
 
     $("#acheckbox").show(); 
 
    } else { 
 
     $("#acheckbox").hide(); 
 
    } 
 
     
 
}); 
 
     
 
    </script>

但由於某些奇怪的原因，也不會在其他地方工作，所以我無法弄清楚如何將它融入我已有的東西。有沒有人有任何想法可以幫助我？謝謝！

Answer 1

你可以做這樣的事情與純JavaScript：

<input type="atripid" id="atripid" value="" onkeyup="keyupFunction()"> 

，並定義keyupFunction（）。

見jsfiddle

Answer 2

你試圖對的jsfiddle的代碼，您需要導入的jquery.js文件。你打算做什麼doung的另一種方法是

<input type='text' id='atripid' name='atripid' size='6' maxlength='6' onkeyup="toggleCheckBox(this)" /> 

<input type='checkbox' name='acheck' id="acheckbox" style="display:none;" onchange='copyTextValue(this);'/> 

與JS

function toggleCheckBox(element) { 
    if(element.value=='') { 
     document.getElementById('acheckbox').style.display = 'none'; 
    } 
    else { 
     document.getElementById('acheckbox').style.display = 'block'; 
    } 
} 

Answer 3

的問題是.keyup()方法，這是不相符的跨瀏覽器和不考慮用戶輸入的其他手段。您寧願使用立即調用的函數表達式（IIFE）來檢測相關輸入字段的propertychange，然後在符合條件時觸發所需的事件。但是，爲了簡單的目的，我是沒有得到很好的IIFE語法不夠精通的事實，只是一些事件綁定到輸入字段，例如：

$("#atripid").on("keyup change propertychange input paste", (function(e) { 
 
    if ($(this).val() === "") { 
 
     $("#acheckbox").hide(); 
 
    } else { 
 
     $("#acheckbox").show(); 
 
    } 
 

 
    }));

#acheckbox { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<form action=""> 
 

 
    tripid: 
 
    <input type="atripid" id="atripid" value="">port: 
 

 
    <input type="aport" id="aport" value=""> 
 

 
</form> 
 

 
<div id="acheckbox"> 
 
    <br> 
 
    <br> 
 
    <br>This is where the email options (subject and textbox) would appear. 
 

 
</div>