用于更改输入框颜色的输入模式属性答案

【问题标题】：Input pattern attribute to change color of an input box用于更改输入框颜色的输入模式属性
【发布时间】：2013-07-17 23:58:02
【问题描述】：

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

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

有人告诉我研究使用允许匹配正则表达式的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 属性更改颜色，请记住我也在使用 class 方法保持这些颜色。

我该怎么做呢？

【问题讨论】：

模式是 RegEx 对象，而不是方法。您应该只阅读 javascript 正则表达式。了解基本知识需要半个小时。一个高级问题：您可能需要担心将字符串复制和粘贴到输入字段中。如果有人将 100 个字符粘贴到字段中，您是否要连续运行 100 次正则表达式测试？好像你可能不得不这样做。但是您还必须删除坏字符之后的所有字符的输入。
我懂正则表达式。我正在寻找某种方法来创建一个每次在输入框中检测到更改时都会运行的函数。无论是逐个字符，还是当用户点击开箱即用时，对我来说都无所谓。输入标签中的模式属性会检查输入的内容以匹配给定的正则表达式，所以我希望我可以通过某种功能使它对我有用。请参阅here，因为它指的是我正在谈论的模式属性。
我想你想绑定到输入'change'事件。如果您使用 jquery，它将类似于 $(input).change(function({...})); 然后在内部您可以检查该值是否与模式属性匹配并添加一个类或将其添加到您的颜色数组中

标签： javascript html input

【解决方案1】：

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

【讨论】：

【解决方案2】：

好的，这是一个工作示例，我不知道您的数据是什么样的，所以我只是编造了一些 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 属性，因为这在检查输入是否针对正则表达式有效时似乎更有用，并且可能对最终验证更有用。

希望对你有帮助。

【讨论】：