サポート » 使い方全般 » JQueryで特定のクラスやID属性値を持つタグにonKeyUpイベントを仕込みたい

  • はじめまして。

    現在、
    ・WP2.8.6
    ・プラグインで Contact Form 7を利用
    以上の環境で、「お問い合わせフォーム」を作っているのですが、

    郵便番号入力欄にAjaxZip 2.0
    (http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html)を仕込みたいと考えています。

    しかし、Contact Form 7の中ではショートコードによるフォーム属性の入力しか認めら得ておらず、

    [text zip id;zip onKeyUp="AjaxZip2.zip2addr(this,'addr','addr');"]と

    書けるものの、JavaScriptに該当する部分を含めるとこのインプットフィールドごとプラグイン側の解釈で削除されてしまいます。

    どうも別の方法として、
    「JQueryを使い、特定のクラスやID属性が付いたもののkeyupイベントで間接的に実行させる方法」があるように、以下のフォーラムを参考にさせていただいているのですが、
    プログラムの知識にとぼしくアレンジの方法をつかめずにおります。
    http://ja.forums.wordpress.org/topic/2945?replies=4

    まとめますと、
    —CODE-1 ———————————————————–
    郵便番号: 〒<input type=”text” name=”zip” size=”10″ maxlength=”8″
    onKeyUp=”AjaxZip2.zip2addr(this,’addr’,’addr’);” id=”zip”>
    ご住所: <input type=”text” name=”addr” size=”60″>
    ———————————————————–

    これを

    ↓↓↓
    —CODE-2 ———————————————————–
    郵便番号: 〒<input type=”text” name=”zip” size=”10″ maxlength=”8″ id=”zip”>
    ご住所: <input type=”text” name=”addr” size=”60″>
    ———————————————————–

    このようにname=”zip”のテキストフィールドからonKeyUp属性を削除し、JQuery側で
    特定のID(ここではid=”zip”)が付いたもののアクションを見て、keyupイベントが働くようにしたいです。

    JavaScriptに関する知識にとぼしく、なんとなく

    $(‘#zip’).keyup(function(event){
    AjaxZip2.zip2addr(this,’addr’,’addr’);”
    });

    このようなタグを書くのかな?といろいろ試しているのですが、
    ・書式が間違っているのか
    ・挿入する場所(<script></script>タグで挟んで、</head>の前)が間違っているのか
    動作せず、お手上げ状態です。(涙)

    どなた様かヒントをご教授くださいますと嬉しいです。

    m(_ _)m

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 使用中のテーマのフォルダ直下に AjaxZip2 の data フォルダがあるとして、
    footer.php あたりで jQuery と ajaxzip2.js の読み込み後に

    <script type=”text/javascript”>
    //<![CDATA[
    $(function(){
    AjaxZip2.JSONDATA = “<?php bloginfo(‘template_url’) ?>/data”;
    $(‘#zip’).keyup(function(event){
    AjaxZip2.zip2addr(this,’addr’,’addr’)
    })
    })
    //]]>
    </script>

    とすると良いです。

    kzさま

    この度は本当にありがとうございました。m(_ _)m

    結果は、「動きました!!」。

    1点、AjaxZip2.zip2addr(this,’addr’,’addr’)の後に;を付け足して無事に動作しています。

    説明もつたない内容にご回答いただきまして感謝しております。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「JQueryで特定のクラスやID属性値を持つタグにonKeyUpイベントを仕込みたい」には新たに返信することはできません。