2

テーブルに多数の入力ボックスを配置したスプレッドシート タイプのフォーマットを作成するプログラムに取り組んでいます。現在、データがテーブルにアップロードされると、いくつかの正規表現が色の変更に役立つように、すべてを色分けしています。ただし、アップロード時のみ。

ただし、データを手動で入力するときに、色を動的に変更できるようにしたいと考えています (ファイルをアップロードして色を呼び出すだけではなく)。

正規表現のマッチングを可能にする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

どうすればこれを行うことができますか？

4

2 に答える 2

2

これが実際の例です。データがどのように見えるかわからないので、一致する正規表現パターンをいくつか作成しました。少しハッキリしていて、クラス名を使用する代わりにJQuery を使用してクラスを変更したいと思うかもしれませんが、これは機能し、簡単なので、ここで...

<!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 ディスパッチされたイベントで動作することがわかるように、これを変更してonchange、たとえば、微妙な違いがあるなど、他のものを使用することができます。これは、短い例では最も動的であるように見えました。

pattern入力が正規表現に対して有効であることを確認する場合により有用であり、最終的な検証にはおそらくより有用であるため、inputs 属性は使用しませんでした。

それが役に立てば幸い。

于 2013-07-18T21:47:09.910 に答える
1

jQuery で pattern 属性からパターンを読み取り、パターンが実際に一致したときに .match 関数を使用して color 関数を実行するのはどうですか?

于 2013-07-18T21:23:22.140 に答える