HTML 点击隐藏文本框 - Html

在web开发中，经常需要在页面中添加输入框以供用户输入数据。然而，当输入框不需要用户交互时，我们可以通过点击其他元素来隐藏输入框。

实现方法

我们可以使用HTML、CSS和JavaScript来实现这个功能。

HTML

首先，我们需要添加一个 input 元素来创建输入框，以及一个 button 元素来作为控制隐藏的按钮。我们还需要为 input 元素和 button 元素添加 id，以便于之后的JavaScript代码中进行操作。

<input type="text" id="hide-input">
<button id="hide-btn">点击隐藏</button>

CSS

添加CSS代码来控制输入框和按钮的样式。在这个例子中，我们将输入框隐藏，并为按钮添加样式。

#hide-input {
  display: none;
}
#hide-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

JavaScript

接下来，我们使用JavaScript来控制按钮的点击事件。当用户点击按钮时，我们需要隐藏输入框。我们可以使用 getElementById() 方法来获取输入框和按钮的引用，然后设置 style.display 属性为 none 来隐藏输入框。

var input = document.getElementById("hide-input");
var button = document.getElementById("hide-btn");

button.onclick = function() {
  input.style.display = "none";
}

完整代码

HTML代码：

<input type="text" id="hide-input">
<button id="hide-btn">点击隐藏</button>

CSS代码：

#hide-input {
  display: none;
}
#hide-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

JavaScript代码：

var input = document.getElementById("hide-input");
var button = document.getElementById("hide-btn");

button.onclick = function() {
  input.style.display = "none";
}

以上就是使用HTML、CSS和JavaScript实现点击隐藏输入框的代码。