0

私はJavaScriptで独自の「クラス」関数を書いているので、それを呼び出すことができ、フォームを好きなようにフォーマットします。

問題は、jQuery にアクセスできる Web サイトで TextFade 関数を作成しましたが、自分のコードをスタンドアロンにしたい (jQuery に依存しない) ことです。

私の質問は、このコードをどのように変換できるかです:

this.textFade = function(element,password){ // needs to be changed so jQuery is not needed anymore
        if(password === 'undefined')
            password = false; // default

        $(element).focus(function() {
            if( this.value == this.defaultValue )
                this.value = "";
            if(password == true)
                this.type = "password";

        }).blur(function() {
            if( !this.value.length ) {
                this.value = this.defaultValue;
                if(password == true)
                    this.type = "text";
            }
        });
}

jQueryを必要としないものへ。

私が抱えている主な問題は、要素でどのイベントがトリガーされたかを確認できないことです。誰かが私にそれを説明できれば、自分でそれを修正することができます(可能であれば別のパラメーターを使用して定義する必要はありません)。

jQueryで検索しようとしましたが、何らかの理由で関数が見つかりませんでした。

4

2 に答える 2

1

私が抱えている主な問題は、要素でどのイベントがトリガーされたかを確認できないことです。誰かが私にそれを説明できれば、自分で修正できるでしょう。

通常、関数を特定のイベントに接続しているため、どのイベントがトリガーされたかがわかります。ただし、同じ関数を複数のイベントにフックした場合でも、どのイベントが発生したかを判別できます。

を使用してイベントをフックすると、イベント ハンドラはオブジェクトaddEventListenerを受け取ります。イベントのタイプは、そのオブジェクトのプロパティから取得できます。たとえば、次のようになります。Eventtype

// Assuming `elm` is an Element
(function() {
    elm.addEventListener('blur', handler, false);
    elm.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            // It's a blur event
        }
        else {
            // It must be a focus event
        }
    }
})();

ただし、現在野生で使用されているすべてのブラウザーが をサポートしているわけではありませんaddEventListener(これは、jQuery のようなライブラリーを使用するいくつかの理由の 1 つです)。古いバージョンの IE では、代わりに を使用する必要がある場合があります(要素にプロパティattachEventがあるかどうかを確認するだけで確認できます)。addEventListenerその場合、ハンドラー内でthis、イベントをフックした要素を指さないことに注意してください (それは を指しますwindow)。

onxyz要素のプロパティに関数を割り当てた場合(例: elm.onclick = function...;)、引数としてイベント オブジェクトを受け取りません。一部のブラウザー(IE、Chrome) では、windowオブジェクトのイベントを見つけることができます。addEventListenerそのイベント オブジェクトは、またはによって渡されるものと非常に似ているattachEventため、そのようにフックされる可能性のあるハンドラーでこれを確認できます。

function handler(event) {
    event = event || window.event;
    // ...use `event` normally...
}

...そのため、関数に引数が渡されなかった場合 (たとえば、addEventListenerorattachEventに接続されていないが、プロパティに直接割り当てられた場合)、window.eventではなく. が使用されますevent。

于 2012-11-26T10:53:59.023 に答える
0

私は通常、ネイティブの JavaScript を使用することを好みますが、これは jQuery が本当に役立つ場合です。最大の問題は、jquery によって適切に処理される要素 (クラス名、ノード、ID、タグ名) を渡すことです。簡単にするためelementに、idパラメータで切り替え、 でノードを取得しますdocument.getElementById。

jQuery を拡張するのではなく、シングルトン パターンを使用して独自のオブジェクトを拡張できます。空のオブジェクト (obj) を設定し、それに関数を追加します。

あなたが求めている機能について100％確信があるわけではありませんが、ここに基本的な翻訳があります.

<input type="text" id="hi" value="hithere">
<input type="button" id="btn" value="click to change to password" />

<script>
var obj = {};

obj.textFade = function(id, password){
     if(password === 'undefined'){
        password = false;
     }
    document.getElementById(id).onfocus = function(){
        if(this.innerHTML == this.defaultValue){
            this.innerHTML = "";
        }
        else if(password == true){
            this.setAttribute('type','password');
        }
    };
    document.getElementById(id).onblur = function(){
        if( !this.value.length ) {
            this.value = this.defaultValue;
            if(password == true){
                this.setAttribute('type','password');
            }
        }
    };
};


document.getElementById('btn').onclick = function(){
    obj.textFade('hi',true);
};
</script>

ここにライブバージョンがあります: http://jsfiddle.net/CJ6DK/1/

于 2012-11-26T11:42:50.980 に答える