博客

如何在HTML输入文本字段内放置一个响应的清除按钮

  • Post category:jquery

当用户在HTML文本字段中填写内容时，可能希望可以方便地清空所填写的内容，这时可以考虑在文本字段的后面放置一个响应的清除按钮。本文将详细讲解如何在HTML输入文本字段内放置一个响应的清除按钮。

HTML的实现

HTML本身并不提供文本字段后面放置清除按钮的功能，但可以通过HTML与CSS联合使用实现此功能。

  1. 在HTML文本字段的后面添加一个按钮
<input type="text" id="input" name="input">
<button type="button" id="clearBtn">清除</button>

上面的代码中，文本字段的id为“input”，清除按钮的id为“clearBtn”。

  1. 使用CSS控制按钮的样式和位置
#clearBtn {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-left: -30px;
}

上面的代码中，将清除按钮的样式设置为了“inline-block”，设置了按钮的字体大小、内边距和边框样式，并将按钮的背景色设置为白色。接下来设置了按钮的左侧外边距为负的值，将清除按钮移动到了文本字段的左侧。

  1. 使用JavaScript实现清除按钮的功能
var input = document.getElementById('input');
var clearBtn = document.getElementById('clearBtn');
clearBtn.onclick = function() {
  input.value = '';
};

上面的代码中，使用JavaScript获取了文本字段和清除按钮的DOM元素，当清除按钮被点击时，将文本字段的值设为空字符串。

至此，HTML输入文本字段内放置一个响应的清除按钮的实现就完成了。

示例说明

假设需要在登录页面中输入用户名和密码，希望可以方便地清除所填写的内容。这时可以在用户名和密码输入框后面都放置清除按钮，具体实现方法如下：

<form action="" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <button type="button" id="usernameClearBtn">清除</button>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <button type="button" id="passwordClearBtn">清除</button>
  <br>
  <input type="submit" value="登录">
</form>

button {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-left: -30px;
}
#usernameClearBtn {
  margin-left: -80px;
}
#passwordClearBtn {
  margin-left: -66px;
}

var username = document.getElementById('username');
var usernameClearBtn = document.getElementById('usernameClearBtn');
usernameClearBtn.onclick = function() {
  username.value = '';
};

var password = document.getElementById('password');
var passwordClearBtn = document.getElementById('passwordClearBtn');
passwordClearBtn.onclick = function() {
  password.value = '';
};

上述示例代码中，分别将输入框的id设置为“username”和“password”，将清除按钮的id分别设置为“usernameClearBtn”和“passwordClearBtn”。在CSS中设置了按钮的样式和位置，在JavaScript中实现了清除按钮的功能。

Tags: