0

非常に長い話ですが、いくつかのフォーム（2）があり、さまざまなタイプの検証が必要です...議論のために、すべてのフォームフィールドで空または""値をチェックしたいとします。

たとえば3つのフィールドがある場合、それらすべてのコードを記述せずに、これらの3つのフィールドの空を同時にチェックするにはどうすればよいですか...

私が意味するのは...例えば：

ここにいくつかのサンプルコードがあります：

JS：

var test = document.getElementById("loginUsername");//this is the username field//

test.onfocus = removeVal;
test.onblur = inserDefVal;

function removeVal(){
    if(test.value == "Enter your Username"){
        test.value = "";    
    }
}


function inserDefVal(){
    if(test.value == ""){
        test.value = "Enter your Username"; 
    }   
}

これで、フィールド値をチェックする2つの関数がありますが、3つのフィールドがある場合、idには次のリストが必要です。

test.onfocus = removeVal;
test.onblur = inserDefVal;

test2.onfocus = removeVal;
test2.onblur = inserDefVal;

test2.onfocus = removeVal;
test2.onblur = inserDefVal;

今、私が空をチェックしたい形で他のすべてのフィールドを想像してください...illはSUPERロングリストを持っています笑..

だから私の質問は、多分、これらすべてを1つにまとめる方法はありますか...そして多分

一般的な機能/またはアクションのように

（論理的には）ここに擬似コードがあります-

if(this.value =="") do xyz....そして「これ」は、押し付けがましい分野です。

または、たとえば、私はどういうわけか..たとえば、すべてのボタン名/変数名を配列に入れて、その名前がArraOfButtonsと言ってから、

ArrayOfButtons.onmouseover/out = function.....

私はあまり混乱しないことを願っています...上記のように、空をチェックするためのtest1 / 2/3がある場合は、日付をチェックすることを想像してください。他の値....ページはSUPERの長さになります。

要するに、私はCSSの速記のようなものを探しています。

margin-top:10px / margin-bottom:10px / margin-left/right:10px

1つはただするだろう

マージン：10px;

ヒント/リンク/情報私は喜んで感謝します。

よろしくお願いします。

4

3 に答える 3

1

jQueryを使用する場合は、すべてのフィールドにクラスを指定して、そのようにアクセスできます。

$('.inputClass')

または要素を介して

$('input')

これにより、一致するすべての要素に対してアクションを実行できます。

于 2012-04-07T01:39:47.903 に答える
1 
<input class="hint" type="text" name="username" value="Enter your Username" data-hint="Enter your Username" />
<input class="hint" type="text" name="email" value="Enter your Email" data-hint="Enter your Email" />
<input class="hint" type="text" name="city" value="Enter your City" data-hint="Enter your City" />

<script type="text/javascript">

    // handler for form elements when they receive onfocus
    function removeVal() {
        // get default value from attribute 'data-hint' and compare the current value
        if ( this.value == this.getAttribute( 'data-hint' ) ) {
            // if current value equal default value, set value to empty
            this.value = "";
        }
    }

    // handler for form elements when they receive onblur
    function inserDefVal() {
        // if current value equal empty
        if ( this.value == "" ) {
            // get default value from attribute and set her to field value.
            // if attribute not found to set empty
            this.value = this.getAttribute( 'data-hint' ) || "";
        }   
    }

    // search elements by className
    function addEvents( className ) {

        var i, j, elem, all, elems = [];

        // If your browser supports "getElementsByClassName", use it
        if ( document.getElementsByClassName ) {
            // search elements by class name
            elems = document.getElementsByClassName( className );
        } else {
            // search elements by class name for IE7-8.
            // IE7-8 not support native "getElementsByClassName"
            all = document.getElementsByTagName( "*" );
            // pass on all the elements
            for( j = 0; elem = all[ j++ ]; ) {
                // check for the presence of our class name
                if ( (" " + elem.className + " ").indexOf( " " + className + " " ) >= 0 ) {
                    // is found the className, put an item in the stack
                    elems[ elems.length ] = elem;
                }
            }
        }

        // hang on found items the events
        for( i = 0; elem = elems[ i++ ]; ) {
            elem.onfocus = removeVal;
            elem.onblur = inserDefVal;
        }
    }

    // initialize elements by className "hint"
    addEvents( 'hint' );

</script>
于 2012-04-07T01:59:17.677 に答える
0

ページ内のすべてのフォームフィールドを反復処理するには、次のようにします。

var formFields = document.getElementsByTagName('input');
for (var i=0; i < formFields.length; i++) {
    var field = formFields[i];
    field.onfocus = removeVal;
    field.onblur = inserDefVal;
}

また、入力の特定のタイプまたは入力に割り当てた可能性のある任意のクラスに基づいて、そのループをフィルタリングすることもできます。

于 2012-04-07T02:01:22.467 に答える