JS 输入隐藏获取值

在 Web 开发中，输入框的隐藏和取值是一个常见的需求。下面将介绍如何使用 JavaScript 实现输入框的隐藏和获取值。

隐藏输入框

使用 JavaScript 隐藏输入框通常有两种方式：使用 CSS 控制输入框是否可见，或者在 DOM 中移除输入框。

使用 CSS 控制输入框是否可见

通过设置输入框的 display 属性或者 visibility 属性，可以控制输入框是否可见。以下是一个示例：

#myInput {
  display: none; /* 隐藏输入框 */
}

<input type="text" id="myInput" value="hello world">
<button onclick="hideInput()">隐藏输入框</button>

<script>
function hideInput() {
  document.getElementById("myInput").style.display = "none";
}
</script>

在这个示例中，点击按钮后，hideInput 函数将输入框隐藏。

在 DOM 中移除输入框

通过从 DOM 中移除输入框，也可以实现输入框的隐藏。以下是一个示例：

<input type="text" id="myInput" value="hello world">
<button onclick="removeInput()">隐藏输入框</button>

<script>
function removeInput() {
  var input = document.getElementById("myInput");
  input.parentNode.removeChild(input);
}
</script>

在这个示例中，点击按钮后，removeInput 函数将输入框从 DOM 中移除。

获取输入框的值

通过 JavaScript，可以获取输入框当前的值。以下是一个示例：

<input type="text" id="myInput" value="hello world">
<button onclick="getValue()">获取值</button>

<script>
function getValue() {
  var input = document.getElementById("myInput");
  var value = input.value;
  alert(value);
}
</script>

在这个示例中，点击按钮后，getValue 函数将弹出一个对话框，显示输入框当前的值。

总结

在 Web 开发中，输入框的隐藏和取值是常见的需求。使用 JavaScript，可以控制输入框的可见性，以及获取输入框的值。