輸入模式屬性，以改變輸入框的顏色

我正在創建一個程序，該程序創建一個輸入框排列在一個表格中的電子表格類型格式。我目前有一切顏色編碼，以便當數據上傳到表格時，一些正則表達式有助於更改顏色。但只限於上傳。輸入模式屬性，以改變輸入框的顏色

不過，我也想能夠用手動態改變顏色我輸入數據（而不是僅僅上傳文件並調用顏色來完成。）

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

輸入模式屬性，以改變輸入框的顏色

回答

相關問題