jquery当文本框值改变颜色

哈喽，亲爱的小伙伴们，今天我要和你们分享一个超实用的小技巧，那就是如何用jQuery来实现文本框值改变时颜色也随之改变的效果，是不是听起来就很酷呢？别急，跟着我一步步来，保证你也能轻松搞定。

我们需要准备一些基本的工具，你需要一个文本编辑器，比如Visual Studio Code或者Sublime Text，还有jQuery库和你的HTML文件，如果你还没有jQuery库，可以在官网下载，或者直接用CDN链接。

让我们开始编写代码，在HTML文件中添加一个文本框和一个jQuery的CDN链接，这样你的页面就可以使用jQuery了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="myInput" placeholder="输入文字，看我变色">
    <script src="script.js"></script>
</body>
</html>

注意，我们在<script>标签中引用了一个名为script.js的JavaScript文件，接下来我们将在这个文件中编写jQuery代码。

让我们打开script.js文件，开始编写jQuery代码，我们要做的是监听文本框的值变化，然后根据输入的内容改变文本框的背景色。

$(document).ready(function() {
    $('#myInput').on('input', function() {
        var inputValue = $(this).val();
        if(inputValue.length > 0) {
            $(this).css('background-color', '#ffcccc'); // 输入框有内容时背景色变为红色
        } else {
            $(this).css('background-color', ''); // 输入框为空时恢复默认背景色
        }
    });
});

这段代码首先确保DOM完全加载后执行，我们使用.on('input', function() {...})来监听#myInput文本框的输入事件，每当用户输入时，inputValue变量就会更新为当前文本框的值，如果inputValue.length > 0，说明文本框里有内容，我们就通过.css('background-color', '#ffcccc')将背景色设置为红色，如果文本框为空，我们就通过.css('background-color', '')将背景色恢复为默认。

你可以保存文件，然后在浏览器中打开你的HTML文件，试试看效果，当你在文本框中输入文字时，背景色会立刻变红，是不是很神奇？

如果我们想要更丰富的颜色变化效果，比如根据输入内容的不同，改变不同的颜色，该怎么办呢？别担心，jQuery也能做到。

我们可以在if语句中添加更多的条件，根据不同的输入内容改变不同的颜色，如果我们想在用户输入“我爱你”时，将背景色变为粉红色，可以这样做：

$(document).ready(function() {
    $('#myInput').on('input', function() {
        var inputValue = $(this).val();
        if(inputValue.length > 0) {
            if(inputValue.includes('我爱你')) {
                $(this).css('background-color', '#ff69b4'); // 输入“我爱你”时背景色变为粉红色
            } else {
                $(this).css('background-color', '#ffcccc'); // 其他输入背景色变为红色
            }
        } else {
            $(this).css('background-color', ''); // 输入框为空时恢复默认背景色
        }
    });
});

这样，当用户在文本框中输入“我爱你”时，背景色就会变为粉红色，其他输入则变为红色。

这只是jQuery改变文本框颜色的一个简单应用，通过jQuery，我们可以实现更多复杂的交互效果，我们可以根据用户的输入内容，动态地改变页面上其他元素的颜色、大小、位置等等，jQuery的强大之处在于，它提供了丰富的API和灵活的链式调用方式，让我们可以轻松地实现各种复杂的页面交互效果。

通过今天的分享，希望大家能对jQuery改变文本框颜色有一个基本的了解，这只是一个起点，jQuery的世界还有很多值得我们去的地方，只要我们勤于实践，勇于尝试，就一定能够jQuery，创造出更多有趣的页面效果，加油，小伙伴们！

WhatsApp电脑版 Facebook下载 Facebook下载谷歌浏览器