logo标签列表

如何使标签可见/不可见？

javascripthtmllabel
21

我有这些日期和时间字段，想要设置一个JavaScript验证时间的规则。

如果格式无效，则应该使标签可见，否则应该隐藏。

以下是我目前拥有的代码：

  <td nowrap="nowrap" align="left">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="right" nowrap="nowrap">
                        <span id="startDateLabel">Start date/time: </span>
                        <input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
                        <button id="startDateCalendarTrigger">...</button>
                        <input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value);"/>
                        <label id="startTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label>
                        <BR>
                        <span id="endDateLabel">End date/time: </span>
                        <input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
                        <button id="endDateCalendarTrigger">...</button>
                        <input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM2(this.value);"/>
                        <label id="endTimeLabel" visible="false">Time must be entered in the format HH:MM AM/PM</label>
                    </td>
                </tr>
            </table>
        </td>
问题在于标签在加载时显示，无论我设置什么为可见性。我尝试了visibility = "hidden"，但它仍然显示出来。
这是验证部分：
    <script>
function validateHHMM(inputField) {
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value);

    if (isValid) {
        document.getElementById("startTimeLabel").style.visibility = "hidden";
    }else {
        document.getElementById("startTimeLabel").style.visibility = "visible";
    }

    return isValid;
}
function validateHHMM2(inputField) {
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(inputField.value);

    if (isValid) {
        document.getElementById("endTimeLabel").style.visibility = "hidden";
    }else {
        document.getElementById("endTimeLabel").style.visibility = "visible";
    }

    return isValid;
}
 </script>

那么，我该怎么做呢？谷歌上显示了不同的验证方法，但没有说明如何隐藏/显示标签。

6个回答
39

你正在寻找display相关的内容：

document.getElementById("endTimeLabel").style.display = 'none';
document.getElementById("endTimeLabel").style.display = 'block';

编辑：你也可以轻易地重用你的验证函数。

HTML：

<span id="startDateLabel">Start date/time: </span>
<input id="startDateStr" name="startDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
<button id="startDateCalendarTrigger">...</button>
<input id="startDateTime" type="text" size="8" name="startTime" value="12:00 AM" onchange="validateHHMM(this.value, 'startTimeLabel');"/>
<label id="startTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label><br />

<span id="endDateLabel">End date/time: </span>
<input id="endDateStr" name="endDateStr" size="8" onchange="if (!formatDate(this,'USA')) {this.value = '';}" />
<button id="endDateCalendarTrigger">...</button>

<input id="endDateTime" type="text" size="8" name="endTime" value="12:00 AM" onchange="validateHHMM(this.value, 'endTimeLabel');"/>
<label id="endTimeLabel" class="errorMsg">Time must be entered in the format HH:MM AM/PM</label>

Javascript：

function validateHHMM(value, message) {
    var isValid = /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);

    if (isValid) {
        document.getElementById(message).style.display = "none";
    }else {
        document.getElementById(message).style.display= "inline";
    }

    return isValid;
}

演示链接

11

将您的标签中的visible="false"更改为style="visibility:hidden"，或者更好地使用一个类来显示/隐藏标签。

.hidden{
   visibility:hidden;
}

然后在标签上添加class="hidden"

使用您的脚本删除该类

document.getElementById("endTimeLabel").className = 'hidden'; // to hide

和

document.getElementById("endTimeLabel").className = ''; // to show
6
你可以尝试：
if (isValid) {
    document.getElementById("endTimeLabel").style.display = "none";
}else {
    document.getElementById("endTimeLabel").style.display = "block";
}

在这方面，

独自一人行动

。
5
您可以将display属性设置为none来隐藏标签。
<label id="excel-data-div" style="display: none;"></label>
4

您可以通过设置以下内容来隐藏/显示它：

.style.display = 'none';
.style.display = 'inline';
0

在编写程序时，请注意对于辅助功能/屏幕阅读器，display:none和visibility:hidden可能不会被识别。当我不想显示标签时，我更喜欢将hidden属性设置为true。

例如：

 <label hidden={!showLabel} htmlFor='input-field'>
   {label}
 </label>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接