2

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

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

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

我的上传通过对每条数据运行一个函数来为这些框着色，如果它是某种颜色，它将把它推入那个特定颜色的数组中。另一个函数在创建表时检查哪些数据在哪个数组中。然后它返回“红色”、“蓝色”或“绿色”。我在标签class属性中使用的所有这些。input

所以假设我有

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
    };
};

where在标签makeColors的类中被调用。input

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

我该怎么做呢？

4

2 回答 2

2

好的，这是一个工作示例，我不知道您的数据是什么样的，所以我只是编写了一些正则表达式模式来匹配。感觉有点 hacky，你可能想使用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，您可以将其更改为使用其他类型，例如，存在细微差别，这似乎是简短示例中最动态的。

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

希望能帮助到你。

于 2013-07-18T21:47:09.910 回答
1

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

于 2013-07-18T21:23:22.140 回答