Question

我正在开发一个程序，该程序创建一个电子表格类型格式，并在表格中排列一堆输入框。我目前拥有所有颜色编码的内容，以便在将数据上传到表格时，一些正则表达式有助于更改颜色。但只能上传。

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

我被告知要使用允许匹配正则表达式的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
    };
};

在makeColors标记的类中调用input。

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

我将如何做到这一点？

Answer 1

好的这是一个工作示例，我不知道你的数据是什么样的，所以我只是编造了一些regex模式来匹配。感觉有点hacky，你可能想要使用JQuery to change the classes而不是使用类名，但这很有用，而且很简单所以你去...

<!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 event dispatched from the input可以作为人物类型使用，您可以将其更改为使用onchange之类的其他内容，例如，存在微妙的差异，这似乎这个简短的例子是最有活力的。

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

希望它有所帮助。

Answer 2

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

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

2 个答案: