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

我正在创建一个程序，该程序创建一个输入框排列在一个表格中的电子表格类型格式。我目前有一切颜色编码，以便当数据上传到表格时，一些正则表达式有助于更改颜色。但只限于上传。输入模式属性，以改变输入框的颜色

不过，我也想能够用手动态改变颜色我输入数据（而不是仅仅上传文件并调用颜色来完成。）

我被告知要考虑使用的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 
    }; 
};

其中makeColors是所谓的类input标签。

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

我该怎么做呢？

来源

2013-07-18 user2494584

模式是RegEx对象，而不是方法。你应该阅读JavaScript正则表达式。了解基础知识需要半个小时。一个高级问题：您可能需要担心将字符串复制并粘贴到输入字段中。如果有人将100个字符粘贴到字段中，您是否要连续运行100次正则表达式测试？似乎你可能不得不。但是你也必须在坏的之后删除所有字符的输入。 – Ringo

我了解正则表达式。我正在寻找一些方法来创建一个函数，每次在输入框中检测到更改时都会运行。不管是逐个角色，还是当用户点击开箱时，对我来说都没有关系。输入标签中的模式属性检查输入的内容是否与给定的正则表达式匹配，所以我希望我可以用某种函数为我做这件事。请参阅[这里]（http://www.w3schools.com/tags/att_input_pattern.asp），因为它指的是我正在谈论的模式属性。 – user2494584

我想你想绑定到输入'更改'事件。如果你使用jquery，它会像'$（input）.change（function（{...}））;'然后在里面你可以检查值是否匹配模式属性，并添加一个类或添加到你的颜色阵列 –

好吧，这里有一个工作示例，我不知道你的数据是什么样的，所以我只是制作了一些regex模式来匹配。感觉有点哈克，你可能想使用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>

正如你可以看到它与onkeyupevent dispatched from the input工作作为一个人类型，你可以改变这个来使用其他人，如onchange，例如，有微妙的差异，这似乎是最简单的例子最具活力。

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

希望它有帮助。

来源

2013-07-18 21:47:09 Jeremy

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

来源

2013-07-18 21:23:22

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

回答

相关问题