Javascript中显示隐藏密码明文,显示隐藏文本框内容,高亮显示被单击的按钮
时间: 2024-12-15 09:13:11 浏览: 14
在JavaScript中,可以使用一些简单的DOM操作和事件处理来实现特定功能:
1. **显示/隐藏密码明文**:
使用`<input type="password">`元素可以让用户输入的内容以星号(*)显示作为掩码,如果你想在需要的时候显示明文,可以添加一个点击事件监听器,例如:
```javascript
var passwordInput = document.getElementById('password-field');
passwordInput.addEventListener('click', function() {
this.type = this.getAttribute('data-original-type'); // 切换回原始类型(可能是'text')
});
```
在HTML中设置`data-original-type="text"`,表示原始输入类型为文本。
2. **显示隐藏文本框内容**:
只需改变`type`属性即可,例如:
```javascript
var hiddenText = document.getElementById('hidden-text');
hiddenText.style.display = 'block'; // 显示内容
hiddenText.style.display = 'none'; // 隐藏内容
```
3. **高亮显示被单击的按钮**:
使用CSS样式和`onclick`事件,比如:
```javascript
var buttons = document.querySelectorAll('.button');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
this.classList.add('highlighted'); // 加亮效果
});
});
// CSS样式:
.highlighted {
background-color: yellow; /* 添加你喜欢的高亮颜色 */
}
```
以上代码假设你的HTML有对应的元素,并且已经包含了`.button`类名。
阅读全文