質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • PHP

    20854questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17024questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

郵便番号から住所の自動入力がしたい

受付中

回答 3

投稿

  • 評価
  • クリップ 3
  • VIEW 2,331

yoshoo219

score 23

郵便番号から住所の自動入力がしたいと考えておりますが、
コンソールには表示されるものがフォームには表示されました。
開発ツールで確認すると、Uncaught TypeError: Cannot set property 'onfocus' of nullという表示が出てしまっております。
どうすれば「住所」の箇所に郵便番号から自動で入力できますでしょうか。
何卒よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム:GET</title>
  <link>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js" type="text/javascript"></script>
  <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>


  <script type="text/javascript">
  $(window).ready( function() {
    $('#postcode1').jpostal({
        postcode : [
            '#postcode1',
            '#postcode2'
        ],
        address : {
            '#address1'  : '%3',
            '#address2'  : '%4',
            '#address3'  : '%5'
        }
    });
});
      $(window).ready( function() {
      $('#postcode1').jpostal({
         postcode : [
            '#postalcode',

         ],
         address : {
            '#address'  : '%3',
         }
      });
   });
      //<!-- 透かし文字をvalue属性で設定する -->
<!--
  var textbox = document.getElementById( 'textbox' );

  // 入力フォーカスを得たときの処理
  textbox.onfocus = function()
  {
      if( this.value == this.defaultValue )
      {
          this.value = '';
          this.style.color = '';
      }
  }

  // 入力フォーカスを失ったときの処理
  textbox.onblur = function()
  {
      if( this.value == '' )
      {
          this.value = this.defaultValue;
          this.style.color = 'gray';
      }
  }

  // 透かし文字をdefaultValueプロパティで保持する
  textbox.defaultValue = textbox.value;
  textbox.value = '';

  textbox.onblur();
//-->
 myform.myarea.value="住所";
</script>
</head>
<body>

<form name="myform" method="post" action="fputs.php">
<p>お名前:<input type="text" name="name" size="20"></p>
<p>MAIL:<input type="text" name="mail" size="30"></p>
<p>電話:<input type="text" name="tell" size="20"></p>
    <p>郵便番号:<input id="postcode1" name="postcode1" maxlength="3">-<input id="postcode2" name="postcode2" maxlength="4"><br /></p>
<p>住所:<input type="text" id="textbox" id="address" name="adress" size="20" name="myarea"></p>
性別:
<input type="radio" name="性別" value="男" /><input type="radio" name="性別" value="女" /><br>
<br>
<textarea name="iken" rows="4" cols="40"> 自由に意見を記述してください </textarea>

<p><input type="submit" value="送信"></p>
</form>

</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

とりあえずそのエラーは、DOMが読み込まれる前に document.getElementById( 'textbox' )が実行されているのが原因です。DOMreadyイベントなどを拾って実行してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

こっちのが簡単ですよ^^
Ajaxzip3

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js" type="text/javascript"></script>
  <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
  <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>


ですね。


textbox.onfocus でエラーが起こるのは Lhankor_Mhyさんが指摘されているように、DOM が読み込まれる前に textbox にイベントを登録しようとしたからだと思います。

<script type="text/javascript">
$( window ).ready( function() {
    $( '#postcode1' ).jpostal( {
        postcode : [ '#postcode1', '#postcode2' ],
        address : { '#address' : '%3%4%5' }
    });
    var textbox = document.getElementById( 'textbox' );

    // 入力フォーカスを得たときの処理
    textbox.onfocus = function() {
        if( this.value == this.defaultValue ) {
            this.value = '';
            this.style.color = '';
        }
    }

    // 入力フォーカスを失ったときの処理
    textbox.onblur = function() {
        if( this.value == '' ) {
            this.value = this.defaultValue;
            this.style.color = 'gray';
        }
    }

    // 透かし文字をdefaultValueプロパティで保持する
    textbox.defaultValue = textbox.value;
    textbox.value = '';

    textbox.onblur();
    myform.myarea.value="住所";

});
</script>

【GitHub - ninton/jquery.jpostal.js: 郵便番号から住所入力するjQueryプラグイン】
https://github.com/ninton/jquery.jpostal.js/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/01 11:08 編集

    DOMContentLoaded は bubble すると規定されてましたでしょうか。
    MDN では bubble するとありますが、対応する WHATWG では明確な規定が見つかりませんでした(私の読解が甘い可能性はあります)。
    https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
    https://www.google.co.jp/search?q=site%3Ahtml.spec.whatwg.org+inurl%3A%2Fmultipage%2F+DOMContentLoaded

    キャンセル

  • 2016/05/01 12:35 編集

    ご指摘ありがとうございます。$( document ).ready() とか $( function() {} ) とかに置きなおせばよかったのですね。

    ただ、さっと調べたらMSDN も bubble するとあります。
    https://msdn.microsoft.com/ja-jp/library/windows/apps/hh868490.aspx

    WHATWG の規定というよりブラウザの実装がだいたい bubble するようになっているのかもしれません。下記のコードが IE11/Firefox/Chrome で動くことを確認できました。Safari や Android は試せていないので実装が違う可能性もあります。

    $( window ).ready( function() { console.log( 'run' ); } );
    window.addEventListener( "DOMContentLoaded", function() { console.log( 'run' ); } );

    キャンセル

  • 2016/05/01 17:39

    bubbleについては比較的実装の足並みが揃っているのですね。
    ところで、MSDNでは Cancelable: No とありますが、MDNでは Cancelable: Yes とあります。
    やはり、この辺りは仕様では策定されていない(実装依存)気がします。
    可能性は低いかもしれませんが、今後、何がしかの事情でFirefoxが Bubbles: No に変更したり、Bubbles: No なあたらしいブラウザが登場する可能性は否定出来ないと思います。
    どちらに転んでもいいようにコードを書いておくのがいいのではないかなと。

    キャンセル

  • 2016/05/01 22:03 編集

    > どちらに転んでもいいようにコードを書いておくのがいいのではないかなと。
    それはもちろんそうです。

    今回はたまたま動いので、ちょっと面白いので調べてみました。返答があいまいだったためお手を煩わせてしまったようで申し訳ありません。

    --追記--

    jQuery.ready は $() の内容如何に関わらず ready イベントをハンドリングしているため、問題が出なかっただけでした。(モダンブラウザでは document.addEventListener( "DOMContentLoaded", completed ); が呼ばれていました)

    キャンセル

関連した質問

同じタグがついた質問を見る

  • PHP

    20854questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17024questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。