input 输入框内不正确分隔符号变红
时间: 2023-09-10 09:15:32 浏览: 44
如果你想要实现在输入框中输入不正确分隔符号时,将其变红的功能,可以使用 JavaScript 来实现。具体的实现步骤如下:
1. 获取输入框的元素,并添加一个事件监听器,监听输入框的输入情况。
2. 在事件处理程序中,检查输入框中的内容是否包含不正确的分隔符号,如果包含,就给输入框添加一个类名,比如 "error",同时给输入框添加一个红色的边框。
3. 如果输入框中的内容不包含不正确的分隔符号,就移除 "error" 类名,同时移除红色的边框。
以下是一个简单的实现示例:
HTML 代码:
```html
<input type="text" id="input-box">
```
CSS 代码:
```css
.error {
border: 1px solid red;
}
```
JavaScript 代码:
```javascript
const inputBox = document.querySelector('#input-box');
inputBox.addEventListener('input', () => {
const inputValue = inputBox.value;
const regex = /[*+|\\{}()[\]^$]/g; // 正则表达式,用于匹配不正确的分隔符号
if (regex.test(inputValue)) {
inputBox.classList.add('error');
} else {
inputBox.classList.remove('error');
}
});
```
在这个示例中,我们监听了输入框的 input 事件,并在事件处理程序中检查输入框中的内容是否包含不正确的分隔符号。如果包含,就给输入框添加一个类名 "error",同时给输入框添加一个红色的边框。如果输入框中的内容不包含不正确的分隔符号,就移除 "error" 类名,同时移除红色的边框。CSS 样式定义了 "error" 类名下的边框颜色。