input type=text输入后显示为星号或其他样式
时间: 2024-03-10 17:43:19 浏览: 123
input 标签的属性
如果您使用的是`<input type="text">`标签,而不是`<input type="password">`标签,那么您需要使用JavaScript来实现输入后显示为星号或其他样式的效果。
具体做法是,使用JavaScript监听输入框的`input`事件,在每次输入时动态地生成带星的文本,并将其设置为输入框的值。同时,使用CSS将输入框的光标颜色设置为透明,以隐藏光标。
以下是一个简单的示例代码:
HTML代码:
```html
<input type="text" id="myInput">
```
CSS代码:
```css
/* 隐藏输入框的光标 */
#myInput {
caret-color: transparent;
}
```
JavaScript代码:
```javascript
var input = document.getElementById("myInput");
input.addEventListener("input", function() {
var value = input.value;
var newValue = "";
for (var i = 0; i < value.length; i++) {
newValue += "*";
}
input.value = newValue;
});
```
当用户在输入框中输入文本时,JavaScript会将输入框中的文本替换为带星的文本,并隐藏光标。这样,用户在输入时就会看到星号或其他样式的文本,而不是明文。
阅读全文