HTML DOM 中的 <input> 元素可以使用 type="hidden" 属性创建一个隐藏的输入框。这种类型的输入框不会在页面上显示,但你可以通过 JavaScript 访问和修改其值,以便在提交表单或进行其他操作时使用。

以下是一个简单的例子,演示如何在 HTML 和 JavaScript 中使用隐藏的输入框:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏输入框示例</title>
</head>
<body>

<!-- 隐藏的输入框 -->
<input type="hidden" id="hiddenInput" value="这是隐藏的值">

<!-- 显示和修改隐藏输入框的值的按钮 -->
<button onclick="displayHiddenValue()">显示隐藏的值</button>
<button onclick="modifyHiddenValue()">修改隐藏的值</button>

<script>
function displayHiddenValue() {
  // 获取隐藏输入框的值
  var hiddenInputValue = document.getElementById('hiddenInput').value;

  // 显示隐藏的值
  alert("隐藏的值是: " + hiddenInputValue);
}

function modifyHiddenValue() {
  // 修改隐藏输入框的值
  document.getElementById('hiddenInput').value = "新的隐藏值";

  // 提示用户已修改值
  alert("隐藏的值已修改为新的值");
}
</script>

</body>
</html>

在这个例子中,我们创建了一个包含隐藏输入框和两个按钮的简单 HTML 页面。第一个按钮调用 displayHiddenValue 函数,该函数获取隐藏输入框的值并通过 alert 函数显示。第二个按钮调用 modifyHiddenValue 函数,该函数修改隐藏输入框的值,并通过 alert 函数提示用户已经修改了值。

隐藏的输入框通常在需要存储一些数据但不希望用户看到或修改这些数据时使用,例如在表单中传递一些额外的信息。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6211/JavaScript 和 HTML DOM