1

解決済み

Mailcheckは「on」メソッドを使用します。これは、私が使用していた古いバージョンのJQueryでは使用できません。KUFIとMARTINに感謝します。

私はJavascript/Jqueryの初心者ですが、これを機能させるために立ち往生しています。

私のウェブサイトに作業フォームがあります。ここに、人気のある電子メールドメインのこのクライアント側のスペルチェックを追加したいと思います。メールアドレスのテキストフィールドのIDは単に「Email」なので、この小さな変更を加えました（大文字のE）。

したがって、私のコードは次のようになります...いくつかのテストステートメントがあります。

<script>
document.write("test0");
document.getElementById('testspan').innerHTML = 'test3';

var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
$('#Email').on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional

    suggested: function(element, suggestion) {
      // callback code
      document.getElementById('testspan').innerHTML = 'test4';
      document.write("test1");
    },

    empty: function(element) {
      // callback code
      document.write("test2");
    }

  });
});
</script>

「test0test3」というテキストは、PHPエコーを実行した場合と同様に、期待どおりに表示されます。

しかし、フォーカスが私の電子メールテキストボックスを離れるとき、目に見えることは何も起こりません。

どこが間違っているのかを誰かが特定するのに十分な詳細を提供したかどうかはわかりません...

「//callbackcode」と書かれた場所に何を書くべきかよくわかりません。スクリーンショットのように「Didyoumean...」というテキストを表示するコードを手動で提供する必要がありますか？ここに画像の説明を入力してください

クーフィーとマーティン、ありがとう。 Kufiのコードに従い、挿入しました

<span id="suggestedEmail"></span>

電子メールテキスト入力要素の後。しかし、何も起こりません。コードパスが実行されているかどうかを明確に確認するために、コールバック関数内に記述できる適切なテストステートメントを誰かが提案できますか？そうではないと感じています。

更新3

クーフィーとマーティン、ありがとうございました。

テスト用に最小限の.HTMLファイルを作成した後でも、それを機能させることができませんでした...今、誰かが私が作成したエラーを見つけることができると思います。これが私のテストファイル全体です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Testing mailcheck</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.mailcheck.js"></script>
</head>

<body>

<form id="form1" name="form1" method="post" action="contactus_mail.php">
 Name: <input name="name" type="text" id="name" size="30"  /> </br>
 Email: <input name="email" type="text" id="email" size="30" />  <span id="suggestedEmail"></span> </br>
 Subject: <input name="subject" type="text" id="subject" size="72" value="" /> </br>
 <input name="Submit" type="submit" value="Submit"/>
</form>

</br>
<span id="testspan1"></span>
</br>
<span id="testspan2"></span>
</br>

<script type="text/javascript">
$("#testspan1").html("test1");
$(function() {
var domains = ['hotmail.com', 'gmail.com', 'live.com', 'yahoo.com'];
 $("#email").on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional
    suggested: function(element, suggestion) {
      // callback code
      $("#suggestedEmail").html("Did you mean " + suggestion.full);
    },
    empty: function(element) {
      // callback code
      document.write("empty was called");
    }
  });
 });
});
$("#testspan2").html("test2");
</script>

</body>
</html>

2つの外部JSファイルの到達可能性以外に確認する必要があるものはありますか？Jqueryのバージョン？

解決しました！

私が得ていた：

Uncaught TypeError: Object #<Object> has no method 'on'

次のような行で：

$("#email").on('blur', function() {

これは、JQuery1.3.2の使用から現在の1.7.2に切り替えたときになくなりました。

4

2 に答える 2

3

ドキュメントに記載されているように、独自の視覚的なフィードバックを作成する必要があります。

「コールバックを使用して、適切な視覚的フィードバックをユーザーに表示できます。」(下部の「使用方法」の章)。

したがって、提案された電子メールを表示するには、次のようなものが必要です。

suggested: function(element, suggestion) {
    $("#suggestedEmail").html("Did you mean " + suggestion.full);
}

編集：更新された質問に。これが動作するjsfiddleです。投稿されたjavascriptコードが実際に使用されているコードである場合は、それを囲む必要があります$(function() { //your code here });

このコードは動作するはずです:

$(function() {
    var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
    $('#Email').on('blur', function() {
      $(this).mailcheck({
        domains: domains,   // optional

        suggested: function(element, suggestion) {
            $("#suggestedEmail").html("Did you mean " + suggestion.full);
        },
        empty: function(element) {
          document.write("test2");
        }
      });
    });
});

$(function() { ... });ページ全体が読み込まれた後に内部のコードが実行されるように、 を使用する必要があります。

于 2012-04-13T13:46:52.610 に答える
1

「suggested」関数は、 elementとSuggestion という2 つのパラメータを受け取ることに注意してください。スクリーンショットに示すように、 Suggestionパラメーターを使用して出力を作成する必要があります。

于 2012-04-13T13:49:33.670 に答える