如果输入框未填充，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>

但是，我希望如果用户将移动字段留空，则不显示“移动:”和“默认”。这可以用 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 的实际值。在你的代码中。确保它没有空格等。或者真正调整您的逻辑，以确定不存在可显示的值。但隐藏元素的实际行为很简单，只需将样式设置为隐藏即可。

此外，我想回应 a comment above 。 <font>标签确实不应该再使用了。您会发现这里对 CSS 样式的一些介绍可以大有帮助。我推荐一些关于该主题的入门教程。

您似乎还有一个错误的 </b>在你的代码中。也许您没有向我们展示全部内容。无论哪种方式，您都需要仔细检查您的 HTML。在使用任何 JavaScript 或 CSS 之前，始终从有效且格式良好的 HTML 开始，否则行为可能不是您所期望的。