如果未填寫輸入框，則Javascript隱藏HTML文本

Question

我有一個HTML表單，用戶可以在其中輸入他們的手機號碼。 見下文：

<form class="formulario" action="signature_test.html" method="get" onsubmit="return signature_Alert()" >
        Mobile (mgrs):  <input type="text" name="mobile" id="mobile"><br>
        <br>
        <input type="submit" value="Generate Signature">
</form> 

用戶輸入的任何內容都將填充到另一個HTML文件中。 它的innerHTML文本為“默認”：

<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>

但是，我希望如果用戶將移動字段留空，則不顯示“ Mobile：”和“ Default”。 Javascript可以實現嗎？

順便說一下，這就是將innerHTML稱為“默認”文本的Javascript。

<script>      
      var values = window.location.search.substring(1).split('&')
      var mobile = values[3].split('=')[1]
      document.getElementById('mobileInput').innerHTML = mobile;
</script>

謝謝。

Answer 1

當然，只需將內容包裝在可以定位和修改的元素中即可：

<span id="mobileInputContainer">
    <font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
</span>

然后，只需調整該元素的樣式即可，就像您已經調整另一個元素的內容一樣：

if (mobile.length < 1) {
    document.getElementById('mobileInputContainer').style.display = 'none';
}

當然，您需要仔細檢查代碼中為mobile獲得的實際價值。 確保它沒有空格等。或者實際上調整您的邏輯來確定沒有值可顯示。 但是隱藏元素的實際操作很簡單，只需將樣式設置為隱藏即可。

另外，我想在上面回應一下 。 <font>標簽真的不應該再使用了。 你會發現介紹CSS樣式的一點點可以在這里很長的路要走。 我推薦有關該主題的一些入門教程。

您的代碼中似乎也有</b>錯誤。 也許您沒有向我們展示全部內容。 無論哪種方式，您都需要仔細檢查HTML。 在使用任何JavaScript或CSS之前，請始終以有效且格式正確的HTML開頭，否則行為可能並非您所期望的。