输入模式属性以更改输入框的颜色

Input pattern attribute to change color of an input box

本文关键字：颜色 输入 属性 输入模式      更新时间：2023-09-26

我正在开发一个程序，该程序创建一种电子表格类型的格式，其中一组输入框排列在一个表中。我目前对所有内容都进行了颜色编码，这样当数据上传到表中时，一些正则表达式可以帮助更改颜色。但只能上传。

然而，我也希望能够在手动输入数据时动态更改颜色（而不是仅仅上传文件并调用颜色完成）

我被告知要研究使用input标记的pattern属性，该属性允许匹配正则表达式。这似乎非常适用，但我不知道如何编写一个利用它的JavaScript函数。我有我的正则表达式，我知道我想使用什么颜色，但我不知道如何在模式中运行函数。

我的上传通过对每一条数据运行一个函数来给盒子上色，如果它是特定的颜色，它就会把它推到数组的特定颜色中。另一个函数在创建表时，检查哪个数组中有哪些数据。然后它返回"红色"、"蓝色"或"绿色"。所有这些都是我在input标记的class属性中使用的。

假设我有

var blue_regex = (/([A-Z0-9]+'*'d+:'d+:'d+)(.+)/);
var red_regex = /('*'d'd$)/;

和

makeColors = function(data) {
    if (red.indexOf(data) >= 0) {
        return "red";
    }
    else if (blue.indexOf(data) >= 0) {
        return "blue";
    }
    else {
        return "green"; //returns green by default
    };
};

其中在CCD_ 6标签的类中调用CCD_。

我不想处理从我提到的这些红色和蓝色数组中推送和弹出项目的问题，而是简单地使用pattern属性更改颜色，请记住，我也在使用class方法来保持这些颜色。

我该怎么做？

好的，这里是一个工作示例，我不知道你的数据是什么样子的，所以我只是编了一些正则表达式模式来匹配。这感觉有点麻烦，你可能想使用JQuery来更改类，而不是使用类名，但这很有效，也很简单，所以现在开始。。。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style>
            .red {
                background-color: red;
            }
            .blue {
                background-color: blue;
            }
            .green {
                background-color: green
            }
        </style>
        <script>
            function applyColour(event){
                // the input value
                var text = event.target.value;
                //match on any 3 letters in a row that are upper or lower case and from 'a to o'
                var isRed = new RegExp(/[A-Oa-o]{3}/g);
                //match on any 3 letters in a row that are upper or lower case and from 'p to z'
                var isBlue = new RegExp(/[P-Zp-z]{3}/g);
                // use the test() method from regexp to return true/false on the match
                if (isRed.test(text)){
                    event.target.className = "red";
                } else if (isBlue.test(text)){
                    event.target.className = "blue";
                } else if (text.length > 0){
                    event.target.className = "green";
                } else {
                    event.target.className = "";
                }
            }

        </script>
    </head>
    <body>
        <input onkeyup="applyColour(event)" />
    </body>
</html>

正如您所看到的，它与从输入中调度的onkeyup事件一起工作，作为一个人的类型，您可以将其更改为使用其他事件，例如onchange，存在细微的差异，这似乎是短示例中最动态的。

我没有使用inputs pattern属性，因为当根据正则表达式检查输入是否有效时，这似乎更有用，并且可能对最终验证更有用。

希望能有所帮助。

用jQuery从pattern属性中读取模式，然后在模式实际匹配时使用.match函数运行颜色函数，怎么样？

相关文章：