如何在JavaScript中实现以下功能:1. 展示并显示密码输入框中的明文内容;2. 当用户点击时动态显示隐藏的文本框内容;3. 高亮标识被单击的按钮?请提供相关的代码示例。
时间: 2024-12-14 14:26:17 浏览: 24
在JavaScript中,你可以通过事件处理机制来实现这些功能。这里是一个简单的例子:
1. 显示密码输入框中的明文内容(假设密码已被加密为`*`字符):
```javascript
// 获取密码输入框
const passwordInput = document.getElementById('password-input');
// 创建一个函数来显示或隐藏明文
function togglePasswordDisplay() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text'; // 变为明文
} else {
passwordInput.type = 'password'; // 变为密文
}
}
// 初始化状态为密文
togglePasswordDisplay();
```
2. 当用户点击时动态显示隐藏的文本框内容:
```html
<!-- 使用data-*属性来存储隐藏文本 -->
<div id="hidden-text" data-text="隐藏的文本">...</div>
<script>
const hiddenTextDiv = document.getElementById('hidden-text');
hiddenTextDiv.addEventListener('click', function() {
this.children[0].textContent = this.dataset.text; // 显示数据属性中的文本
});
</script>
```
3. 高亮标识被单击的按钮:
```html
<button id="myButton">点击我</button>
<style>
.highlighted {
background-color: yellow;
}
</script>
<script>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
this.classList.toggle('highlighted'); // 点击时添加或移除高亮样式
});
</script>
```
阅读全文