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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

JavaScript

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

Q&A

3回答

5378閲覧

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

yahret45

総合スコア41

PHP

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

JavaScript

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

0グッド

3クリップ

投稿2016/04/30 09:04

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

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>フォーム:GET</title> 6 <link> 7 <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> 8 <script src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js" type="text/javascript"></script> 9 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> 10<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script> 11 12 13 <script type="text/javascript"> 14 $(window).ready( function() { 15 $('#postcode1').jpostal({ 16 postcode : [ 17 '#postcode1', 18 '#postcode2' 19 ], 20 address : { 21 '#address1' : '%3', 22 '#address2' : '%4', 23 '#address3' : '%5' 24 } 25 }); 26}); 27 $(window).ready( function() { 28 $('#postcode1').jpostal({ 29 postcode : [ 30 '#postalcode', 31 32 ], 33 address : { 34 '#address' : '%3', 35 } 36 }); 37 }); 38 //<!-- 透かし文字をvalue属性で設定する --> 39<!-- 40 var textbox = document.getElementById( 'textbox' ); 41 42 // 入力フォーカスを得たときの処理 43 textbox.onfocus = function() 44 { 45 if( this.value == this.defaultValue ) 46 { 47 this.value = ''; 48 this.style.color = ''; 49 } 50 } 51 52 // 入力フォーカスを失ったときの処理 53 textbox.onblur = function() 54 { 55 if( this.value == '' ) 56 { 57 this.value = this.defaultValue; 58 this.style.color = 'gray'; 59 } 60 } 61 62 // 透かし文字をdefaultValueプロパティで保持する 63 textbox.defaultValue = textbox.value; 64 textbox.value = ''; 65 66 textbox.onblur(); 67//--> 68 myform.myarea.value="住所"; 69</script> 70</head> 71<body> 72 73<form name="myform" method="post" action="fputs.php"> 74<p>お名前:<input type="text" name="name" size="20"></p> 75<p>MAIL:<input type="text" name="mail" size="30"></p> 76<p>電話:<input type="text" name="tell" size="20"></p> 77 <p>郵便番号:<input id="postcode1" name="postcode1" maxlength="3">-<input id="postcode2" name="postcode2" maxlength="4"><br /></p> 78<p>住所:<input type="text" id="textbox" id="address" name="adress" size="20" name="myarea"></p> 79性別: 80<input type="radio" name="性別" value="男" />81<input type="radio" name="性別" value="女" />82<br> 83<br> 84<textarea name="iken" rows="4" cols="40"> 自由に意見を記述してください </textarea> 85 86<p><input type="submit" value="送信"></p> 87</form> 88 89</body> 90</html> 91 92```

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

投稿2016/04/30 22:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2016/04/30 11:00

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

HTML

1 <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> 2 <script src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js" type="text/javascript"></script> 3 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> 4 <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script> 5```は 6```HTML 7<script src="//code.jquery.com/jquery-2.1.0.min.js"></script> 8<script src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

ですね。


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

JavaScript

1<script type="text/javascript"> 2$( window ).ready( function() { 3 $( '#postcode1' ).jpostal( { 4 postcode : [ '#postcode1', '#postcode2' ], 5 address : { '#address' : '%3%4%5' } 6 }); 7 var textbox = document.getElementById( 'textbox' ); 8 9 // 入力フォーカスを得たときの処理 10 textbox.onfocus = function() { 11 if( this.value == this.defaultValue ) { 12 this.value = ''; 13 this.style.color = ''; 14 } 15 } 16 17 // 入力フォーカスを失ったときの処理 18 textbox.onblur = function() { 19 if( this.value == '' ) { 20 this.value = this.defaultValue; 21 this.style.color = 'gray'; 22 } 23 } 24 25 // 透かし文字をdefaultValueプロパティで保持する 26 textbox.defaultValue = textbox.value; 27 textbox.value = ''; 28 29 textbox.onblur(); 30 myform.myarea.value="住所"; 31 32}); 33</script>

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

投稿2016/04/30 11:06

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/01 19:27 編集

ご指摘ありがとうございます。$( 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' ); } );
think49

2016/05/01 08:39

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

2016/05/01 19:32 編集

> どちらに転んでもいいようにコードを書いておくのがいいのではないかなと。 それはもちろんそうです。 今回はたまたま動いので、ちょっと面白いので調べてみました。返答があいまいだったためお手を煩わせてしまったようで申し訳ありません。 --追記-- jQuery.ready は $() の内容如何に関わらず ready イベントをハンドリングしているため、問題が出なかっただけでした。(モダンブラウザでは document.addEventListener( "DOMContentLoaded", completed ); が呼ばれていました)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問