js输入框后怎么加红色叉号

在JS输入框后加红色叉号的方法有多种，常见的方法包括：使用CSS样式、JavaScript动态添加元素、利用字体图标库（如Font Awesome）等。其中，使用CSS样式和JavaScript动态添加元素是最常见的方法。下面我们将详细介绍如何通过这两种方法在JS输入框后添加红色叉号。

一、使用CSS样式

创建HTML结构

首先，我们需要创建一个基本的HTML结构，其中包含一个输入框和一个用于显示红色叉号的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色叉号</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="input-container">
        <input type="text" id="inputField" placeholder="请输入内容">
        <span class="error-icon">&times;</span>
    </div>
</body>
</html>

添加CSS样式

接下来，我们需要为红色叉号和输入框添加样式。我们会将红色叉号隐藏，并在特定条件下显示。

.input-container {
    position: relative;
    display: inline-block;
}
input[type="text"] {
    padding-right: 20px; /* 为了给叉号留出空间 */
}
.error-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 18px;
    display: none; /* 默认隐藏 */
}

使用JavaScript控制显示

最后，我们使用JavaScript来控制红色叉号的显示和隐藏。例如，当输入框失去焦点且内容为空时，显示红色叉号。

const inputField = document.getElementById('inputField');
const errorIcon = document.querySelector('.error-icon');
inputField.addEventListener('blur', function() {
    if (inputField.value.trim() === '') {
        errorIcon.style.display = 'inline';
    } else {
        errorIcon.style.display = 'none';
    }
});
inputField.addEventListener('input', function() {
    if (inputField.value.trim() !== '') {
        errorIcon.style.display = 'none';
    }
});

二、使用JavaScript动态添加元素

创建HTML结构

与上面的方法类似，我们需要一个基本的HTML结构，但不需要预先创建红色叉号的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色叉号</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="input-container">
        <input type="text" id="inputField" placeholder="请输入内容">
    </div>
</body>
</html>

添加CSS样式

我们可以为红色叉号定义一个类，并隐藏它。我们还需要为输入框容器添加样式。

.input-container {
    position: relative;
    display: inline-block;
}
input[type="text"] {
    padding-right: 20px; /* 为了给叉号留出空间 */
}
.error-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 18px;
    display: none; /* 默认隐藏 */
}

使用JavaScript动态添加红色叉号

我们使用JavaScript在特定条件下动态添加红色叉号，并控制其显示和隐藏。

const inputField = document.getElementById('inputField');
inputField.addEventListener('blur', function() {
    let errorIcon = document.querySelector('.error-icon');
    if (!errorIcon) {
        errorIcon = document.createElement('span');
        errorIcon.classList.add('error-icon');
        errorIcon.innerHTML = '&times;';
        inputField.parentNode.appendChild(errorIcon);
    }
    if (inputField.value.trim() === '') {
        errorIcon.style.display = 'inline';
    } else {
        errorIcon.style.display = 'none';
    }
});
inputField.addEventListener('input', function() {
    const errorIcon = document.querySelector('.error-icon');
    if (errorIcon && inputField.value.trim() !== '') {
        errorIcon.style.display = 'none';
    }
});

三、使用字体图标库

引入Font Awesome

首先，我们需要在HTML文件中引入Font Awesome库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色叉号</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="input-container">
        <input type="text" id="inputField" placeholder="请输入内容">
        <i class="fas fa-times error-icon"></i>
    </div>
</body>
</html>

添加CSS样式

我们为Font Awesome图标和输入框添加样式。

.input-container {
    position: relative;
    display: inline-block;
}
input[type="text"] {
    padding-right: 20px; /* 为了给叉号留出空间 */
}
.error-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 18px;
    display: none; /* 默认隐藏 */
}

使用JavaScript控制显示

我们使用JavaScript控制Font Awesome图标的显示和隐藏。

const inputField = document.getElementById('inputField');
const errorIcon = document.querySelector('.error-icon');
inputField.addEventListener('blur', function() {
    if (inputField.value.trim() === '') {
        errorIcon.style.display = 'inline';
    } else {
        errorIcon.style.display = 'none';
    }
});
inputField.addEventListener('input', function() {
    if (inputField.value.trim() !== '') {
        errorIcon.style.display = 'none';
    }
});

以上介绍了三种在JS输入框后添加红色叉号的方法，每种方法都有其优点和适用场景。使用CSS样式和JavaScript动态添加元素是最常见的方法，适用于大多数场景；而使用字体图标库则可以使红色叉号的样式更加美观且易于管理。根据具体需求选择合适的方法，可以提高用户体验和代码的可维护性。

js输入框后怎么加红色叉号

一、使用CSS样式

二、使用JavaScript动态添加元素

三、使用字体图标库

相关问答FAQs：