郵便番号を入力して検索ボタンをクリックしたら、入力フォームやプルダウンに検索結果の住所を挿入するようにしたい

郵便番号を入力したら住所が出てくるというフォームは最近よく見かけるので、むしろそうなっていないフォームにぶちあたると「めんどくせー」と思ってしまうことすらないだろうか。まあそれはともかく、そうしたサイトで実現しているであろうテクニックを書いてみたい。 “郵便番号を入力して検索ボタンをクリックしたら、入力フォームやプルダウンに検索結果の住所を挿入するようにしたい” の続きを読む

FAQ(Q&A)などでよくある、見出しをクリックしたらアコーディオン式に内容の表示/非表示を切り替えられるやり方をjQueryで実装したい

Q&Aなどのような、一覧でズラーと並べてしまうと見にくくなってしまうような場合、不必要な表示は隠しておきたい。そしてユーザがクリックするなどのアクションに従って表示させたい。そうした表示方法はいくつかあるだろうが、アコーディオン式の表示/非表示切り替えは比較的使いやすいのではないだろうか。 “FAQ(Q&A)などでよくある、見出しをクリックしたらアコーディオン式に内容の表示/非表示を切り替えられるやり方をjQueryで実装したい” の続きを読む

未入力状態のテキストフォームにグレーのデフォルト文字を表示し、フォーカスがあたったり文字が入力されたら消えるようにしたい

最近はお問い合わせや予約のフォームで一般的になりつつある、テキストフォームに入力説明や入力例といったデフォルト文字をグレーで淡く表示しておき、入力フォームをクリックしてフォーカスが当たったり、何か文字が入力されたりしたらデフォルト文字を消す。逆に入力文字がすべて空になった場合はふたたびデフォルト文字を淡く表示するといった方式。これをjQueryで実現してみた。 “未入力状態のテキストフォームにグレーのデフォルト文字を表示し、フォーカスがあたったり文字が入力されたら消えるようにしたい” の続きを読む

jQueryを使って入力フォームのコピー&ペースト(コピペ)を禁止するようにしたいと思って作業してもぜんぜん思い通りにならなかったが、意外な盲点がそこにあったためだった

パスワード確認入力や電子メールアドレス確認入力などのフォームで、コピー&ペーストを禁止したい場面がある。せっかくの確認のための入力なのに、手入力されずにコピペされてしまうと、もともとの入力が誤っている場合には何の効力も持たなくなってしまう。だから元の入力フォームはコピーさせてもいいけれど(あるいはこちらも禁止したいという要望もあるかもしれない)、確認のための入力欄についてはペースト禁止したい。ウェブでフォームを作っていると、そんな要望は必ずといっていいほど出てくる。jQueryではそれが簡単にできる。 “jQueryを使って入力フォームのコピー&ペースト(コピペ)を禁止するようにしたいと思って作業してもぜんぜん思い通りにならなかったが、意外な盲点がそこにあったためだった” の続きを読む

selectタグで画像を選択するためのeggというのを使ってみる

数ある画像をユーザに選択させるのに、セレクトボックスを利用することはできないだろうか……と思って調べてみたら、やはり存在した。「Egg」というjQueryベースのプラグ印だ。もともとは「ImageSelect」というやはりjQueryベースの画像セレクタだったらしいが、最新版は別のプラグインとして登場しているようだ。これがシンプルに使えそうなので使ってみた。 “selectタグで画像を選択するためのeggというのを使ってみる” の続きを読む

jQuery UI標準のカレンダーUI「datepicker」を使う

datepickerは、jQuery UIのUIセットに含まれる標準のカレンダー機能で、おそらくカレンダーUIとしてはもっとも使われているものの1つなのだと思う。なので世の中に多数の利用方法を解説したブログがあるだろうが、まあ自分メモ用として記録しておくことにした。 “jQuery UI標準のカレンダーUI「datepicker」を使う” の続きを読む

jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル

チェックボックスの全チェックボタン、全チェック外しボタンを実装して、一括チェック・一括チェック外しといった動的フォームを作成しようと思い、jQuery-1.9.1を使って実装していた。もともとjQueryは1.4系をメインに使っていたのだが、今回jQuery1.9系を使うようにしてみた。もっともここが落とし穴にハマる第一段階だったのだが……。 “jQueryでチェックボックスの全チェック/外しをしようとしてハマッたこと、attr()とprop()の違いは罠レベル” の続きを読む

IEでは<form>タグがないと読み込めない

jQueryを使ってお気楽Ajaxを実装しようとしていた。

郵便番号から住所を埋めるというもので、バックエンドはPHP。日本郵便のCSV郵便番号簿をそのまま利用している極めてシンプルなもの。
郵便番号入力欄から、値を読み込もうとしてval()メソッドを使ってみた。ていうか、これしかないと思って使った。


zipcode = $("#zipcode").val();

で、Firefoxでは動作するのだが、IEではまったく動かない。
どういうことだと思ってググってもヒントすら見当たらない。
うーんまさかね、と思いつつも、このコードでは必要がない<form>タグを追加したら、問題なく動いた。
HTMLの仕様をまじめに読んでないし、IEが正しい動作をしているのかどうかまではわからないけれど、この程度の違いですら結構混乱する。

ウェブ開発業界内ではメジャーな話なのかしら、と思いつつ、まったく興味が無いので深追いしない昨今。

wp-amazon

WordPress標準ガイドブック&horbar;導入&基本操作からフルチューンまでWordPress 2.2でつくる!最強のブログサイト&horbar;2.1/2.2対応wordpressのプラグインで、Amazonアフィリエイトを簡単に利用できるwp-amazonを使ってみようと、さっそくパッケージを展開したがNG。

いろいろウェブで探したら、2.2系には対応しないので、パッチを作って対応したひとがいるらしいので、パッチが適用されたwp-amazon.phpに置き換えてみた。

■WP-Amazon 2.0 Beta 1.1+wp22
http://www.gnifty.net/code/wp-amazon/wp-amazon.php

これだけではダメで、JavaScriptのエラーコンソールでjQuery関連のエラーがでていたので、jQueryを最新版にしてみたりした。

■jQuery-1.2.2
http://jqueryjs.googlecode.com/files/jquery-1.2.2.js
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.2.js

これで、なんとか動いたくさい。
いや、つかれた…昨日の貴重な夜の時間は、これの調査で費やして結局実りなかったからなぁ…しょぼん。