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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

3回答

6146閲覧

yubinbago.js で住所取得を検知したい

poliphilus

総合スコア149

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2017/10/04 03:58

編集2022/01/12 10:55

yubinbango.js で、住所が取得できた瞬間をイベントで検知したいんですが、うまく行きません。
jQuery で $('input[name=prefecture]').on('change') などとしてもダメです。

HTML

1<form class="h-adr"> 2 <span class="p-country-name" style="display:none;">Japan</span> 3 <input type="text" name="zip" class="p-postal-code"> 4 <input type="text" name="prefecture" class="p-region"> 5 <input type="text" name="city" class="p-locality"> 6 <input type="text" name="address" class="p-street-address p-extended-address"> 7 <input type="text" name="city_code"> 8</form>

JavaScript

1$(function(){ 2 $('input[name=zip]').on('keyup', function(){ 3 // $('input[name=city]').on('change', function(){ が理想 4 if ($('input[name=city]').val()) { 5 // 取得した瞬間には反応しない 6 $.post('/get/city/code', { // 市区町村コードを取得するPHPプログラム呼び出し 7 prefecture: $('input[name=prefecture]').val(), 8 city: $('input[name=city]').val() 9 }, 'json').done(function(r){ 10 $('input[name=city_code]').val(r.code); 11 }).fail(function(){ 12 alert('取得失敗'); 13 }); 14 } 15 }); 16});

という上記のコードもうまく動作しませんでした。
$('input[name=zip]').on('blur') ならば
取得後の値を拾うことができるのですが、
タイミングが「取得した瞬間」ではないのでちょっと希望とは違います。
どうすればその瞬間を捉えることができますでしょうか。
どなたかご存じの方、よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2017/10/04 04:32

なぜ瞬間のイベントを検知したいのか具体的に記述をお願いします。
poliphilus

2017/10/04 04:42

同じタイミングで「市区町村コード」を拾いたいんです。自前のDBに市区町村コードをを持っていて、取得後の都道府県名と市区町村名からコードを拾い、取得できなかったらエラーを返したいんです。UI的にタイミングがズレるとユーザーに違和感がありますので。
m.ts10806

2017/10/04 04:48 編集

念のため取得部分のコードとhtmlも質問に追記いただけますか?
poliphilus

2017/10/04 05:53

記述しました。よろしくお願いします。
退会済みユーザー

退会済みユーザー

2017/10/04 06:15

タイミングがずれるのが嫌なら hidden項目を設定ターゲットにしてやればいいんじゃないのかしら
guest

回答3

0

検出用のダミー要素を作って監視するのはどうでしょう?
https://jsfiddle.net/bmvcneoo/

HTML

1 <form class="h-adr"> 2 <span class="p-country-name" style="display:none;">Japan</span> 3 4 〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br> 5 6 <input type="hidden" class="p-region p-locality p-street-address p-extended-address" /> 7 <input type="text" class="p-region p-locality p-street-address p-extended-address" /><br> 8 </form>

javascript

1(function(target){ 2 Object.defineProperty(target, 'value',{ 3 get : function(){return value;}, 4 set : function(x){ if (x) { console.log(x) } value = x; } 5 }) 6})(document.querySelector('.p-region[type=hidden]'))

 

ダミー要素なしでも行けました

が、互換性は確認してないです。
https://jsfiddle.net/bmvcneoo/2/

javascript

1(function(target){ 2 Object.defineProperty(target, 'value',{ 3 get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)}, 4 set : function(x){ 5 if (x) {console.log(x)} 6 Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set.call(target,x); 7 } 8 }) 9})(document.querySelector('.p-region'))

投稿2017/10/04 07:19

編集2017/10/05 00:42
Lhankor_Mhy

総合スコア35871

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

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

poliphilus

2017/10/05 02:48

ナマのJSに長らく触れてないのでちょっと解釈に手間取ってますが(笑)、検証にしばらくお時間ください。すみません。
guest

0

yubinbago.jsの挙動はわかりませんが、MutationObserverでDOMの変更を検知できます。
MutationObserver
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

投稿2017/10/04 08:32

x_x

総合スコア13749

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

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

Lhankor_Mhy

2017/10/04 08:33

私もやってみたんですけどダメだったもので、サンプルとかあれば拝見したく。
x_x

2017/10/04 08:45

そもそもyubinbago.jsを動かすことができなかったのです。すみません。
Lhankor_Mhy

2017/10/04 08:50

私の回答に動いてるサンプルがあります。 MutationObserver の監視対象である attributes は、HTMLの属性だと思うので、Elementオブジェクトのプロパティは監視できないんじゃないかと思ってます。 validityプロパティあたりが監視できたら、いろいろ楽しそうなことができそうなんですが。
x_x

2017/10/04 08:53

動きませんでした。郵便番号を入力するだけでいいんですよね?
Lhankor_Mhy

2017/10/04 08:58

おや、そうでしたか。 環境依存のもの使ったつもりはなかったんですが…… 確認してみます。
x_x

2017/10/04 09:33

環境というか、3ブラウザで確認して動かないので、ネットワーク回りかもしれませんね。
Lhankor_Mhy

2017/10/04 09:50

あー、そういえばなんかさっき jsFiddle 鯖重でした。
退会済みユーザー

退会済みユーザー

2017/10/04 10:21

横からになりますが、MutationObserverを試したところ、value属性への値のセットの仕方によっては、MutationObserverが反応したりしなかったりという現象が見られます(macOS Chromeだけでしか確認してませんが。 https://jsfiddle.net/takmatz/zybz7vf2/3/
Lhankor_Mhy

2017/10/04 10:45

element.setAttribute メソッドはHTMLの属性を変更するものですから、そのような動作になると思います。jQueryのattrメソッドも同様です。 一方で、jQueryのpropメソッドはプロパティを参照するので、MutationObserverに監視されないです。 HTMLInputElement.value なんかは、DOM属性ではなくてプロパティを触るように推奨されていたかと思います。その辺の流れでjQueryにpropメソッドが追加されたんではなかったかな?
Lhankor_Mhy

2017/10/04 10:50

Tak_Matzさんのスクリプトで試してみましたが、フォームに”111”と入力してから、setAttributeメソッドを使っても、フォーム内の入力は変更されません。 やはり、HTMLInputElement.value でコントロールすべきなんだと思います。(そしてMutationObserverはつかえない)
x_x

2017/10/05 12:04

ああ、やっとわかりました。使い慣れた自分の郵便番号を入力していたのですが、これがデータにないですね。3年近く前からあるはずなのですが、全然更新されていないようです。
x_x

2017/10/05 12:05

間違い。4年近く前…でした。
guest

0

残念ながら、正式には用意されていませんこのJavaScriptのもととなったTypeScriptでのソース)。

方法は2つ考えられまして、

  • 改造して、「補完完了時」に何かイベントを起こすようにする
  • タイマーで監視して、書き換わったタイミングを検知する

のような感じです。

投稿2017/10/04 05:49

maisumakun

総合スコア145123

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

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

poliphilus

2017/10/05 02:49

すみません、TypeScript は不勉強でして…。参考にいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問