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

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

javascript html input

Javascript 输入模式属性以更改输入框的颜色,javascript,html,input,Javascript,Html,Input,我正在开发一个程序，该程序创建一个电子表格类型的格式，在表格中排列一组输入框。我目前对所有内容都进行了颜色编码，这样当数据上传到表中时，一些正则表达式可以帮助更改颜色。但只能上传但是，我也希望能够在手动输入数据时动态更改颜色（而不是仅仅上传文件并调用颜色完成）我被告知要研究如何使用input标记的模式属性来匹配正则表达式。这似乎非常适用，但我不知道如何编写一个利用它的JavaScript函数。我有我的正则表达式，我知道我想要使用什么颜色，但我不知道如何在模式中运行函数我的上传通过在每个数据

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

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

我被告知要研究如何使用

input

标记的

模式

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

我的上传通过在每个数据块上运行一个函数来给方框上色，如果它是特定的颜色，它会将它推送到特定颜色的数组中。另一个函数在创建表时，检查什么数组中有哪些数据。然后它返回“红色”、“蓝色”或“绿色”。所有这些都是我在

类的属性中为输入标记使用的
那就说我有
var blue_regex = (/([A-Z0-9]+\*\d+:\d+:\d+)(.+)/);
var red_regex = /(\*\d\d$)/;

及
其中makeColors
在input
标记的类中被调用
我不想处理从我提到的这些红色和蓝色数组中推送和弹出项目的问题，而只是使用模式
属性更改颜色，记住我也在使用类
方法来保存这些颜色
我该怎么做呢？
如何使用jQuery从pattern属性中读取pattern，然后使用.match函数在pattern实际匹配时运行color函数？
好的，这是一个工作示例，我不知道您的数据是什么样的，所以我只是制作了一些要匹配的模式。它感觉有点粗糙，您可能想使用它而不是使用类名，但是这很有效而且很简单，所以您可以这样做
<!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>


瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
格林先生{
背景颜色：绿色
}
函数ApplyColor（事件）{
//输入值
var text=event.target.value；
//匹配一行中从“a”到“o”的任意3个大写或小写字母
var isRed=新的RegExp（/[A-Oa-o]{3}/g）；
//匹配一行中从“p到z”的大写或小写字母
var isBlue=newregexp（/[P-Zp-z]{3}/g）；
//使用regexp中的test（）方法返回匹配的true/false
如果（isRed.测试（文本））{
event.target.className=“红色”；
}else if（蓝色。测试（文本））{
event.target.className=“蓝色”；
}else if（text.length>0）{
event.target.className=“绿色”；
}否则{
event.target.className=“”；
}
}

正如您所看到的，当一个人键入时，它与onkeyup
一起工作，您可以将其更改为使用其他类型，例如onchange
。例如，有一些细微的差异，对于简短的示例来说，这似乎是最动态的
我没有使用inputspattern
属性，因为在对照正则表达式检查输入是否有效时，该属性似乎更有用，并且对于最终验证可能更有用
希望有帮助。
模式是正则表达式对象，而不是方法。您应该阅读javascript正则表达式。理解基本知识需要半个小时。一个高级问题是：您可能需要担心将字符串复制和粘贴到输入字段中。如果有人将100个字符粘贴到字段中，您是否要连续运行100次正则表达式测试？看来你可能不得不这么做。但是你还必须删除坏字符之后所有字符的输入。我理解正则表达式。我正在寻找一些方法来创建一个函数，该函数将在每次检测到输入框中的更改时运行。无论是一个字符接一个字符，还是当用户点击开箱即用，这对我来说都无关紧要。输入标记中的pattern属性检查输入的内容以匹配给定的正则表达式，所以我希望我可以通过某种函数使其对我起作用。请看，因为它引用了我所说的模式属性。我认为您希望绑定到输入“更改”事件。如果使用jquery，它将类似于$（input）.change（函数（{…}））然后在内部可以检查该值是否与pattern属性匹配，并添加一个类或将其添加到颜色数组中
<!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>