連動ボタンの作り方

2011/05/09 15:44

このQ&Aのポイント

PHPとMySQLにて、ユーザー管理のシステムを作成しております。ユーザーの検索にて、イニシャルのフィールドより、PHP経由で検索する部分は完成しているのですがキーボードからの入力を極力無くしたいために、「あ」「か」「さ」等のボタンを配してSQLを組み立てています。
現状、「あ」をクリックした場合、「あ」「い」「う」「え」「お」が表示されるようになっているのですができれば1文字づつ検索できればと、知恵を絞ってます。現実的な話で、「あ」をクリックした場合、別のボタンに「あ」「い」「う」「え」「お」「か」をクリックした場合、「か」「き」「く」「け」「こ」と、動的に変化するボタンを生成できれば理想に近い動作が期待できそうです。
おそらく、JavaScriptを使えば、実装できそうなのですが、とっかかりが無くこまっております。参考になるような項目等、提示して頂ければ幸いです。

buraba111
お礼率100% (2/2)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2011/05/09 20:07 回答No.1

ie は、ぱす！ぜんかくくうはくは、はんかくにしてみてね。 <!DOCTYPE html> <title></title> <style type="text/css"> #a input[type="button"] { 　width : 25px; } #b input[type="button"] { 　width : 60px; 　height : 60px; } </style> <form id="hoge" action="#"> 　<div id="a"> 　　<input type="button" value="あ"> 　　<input type="button" value="か"> 　　<input type="button" value="さ"> 　　<input type="button" value="た"> 　　<input type="button" value="な"> 　　<input type="button" value="は"> 　　<input type="button" value="ま"> 　　<input type="button" value="や"> 　　<input type="button" value="ら"> 　　<input type="button" value="わ"> 　　<input type="button" value="ん"> 　</div> 　<div id="b"> 　　<input type="button" value="・"> 　　<input type="button" value="・"> 　　<input type="button" value="・"> 　　<input type="button" value="・"> 　　<input type="button" value="・"> 　</div> 　<input type="hidden" name="Initials" value=""> </form> <script> var hoge = { 　a : document.querySelectorAll ('#a input'), 　b : document.querySelectorAll ('#b input'), 　c : { 　　　'あ': ['あ', 'い', 'う', 'え', 'お'], 　　　'か': ['か', 'き', 'く', 'け', 'こ'], 　　　'さ': ['さ', 'し', 'す', 'せ', 'そ'], 　　　'た': ['た', 'ち', 'つ', 'て', 'と'], 　　　'な': ['な', 'に', 'ぬ', 'ね', 'の'], 　　　'は': ['は', 'ひ', 'ふ', 'へ', 'ほ'], 　　　'ま': ['ま', 'み', 'む', 'め', 'も'], 　　　'や': ['や', '・', 'ゆ', '・', 'よ'], 　　　'ら': ['ら', 'り', 'る', 'れ', 'ろ'], 　　　'わ': ['わ', 'ゐ', '・', 'ゑ', 'を'], 　　　'ん': ['ん', '・', '・', '・', '・'] 　　}, 　d : function (a, b) { this[b].value = a; this[b].disabled = (a == '・')}, 　e : document.querySelector ('input[name="Initials"]'), 　　handleEvent : 　　function (evt) { 　　　var e = evt.target; 　　　　　　if ('INPUT' === e.nodeName) 　　　　if ('button' === e.type) 　　　　　switch (e.parentNode.id) { 　　　　　case 'a' : 　　　　　　this.c[e.value].forEach (this.d, this.b); 　　　　　　break; 　　　　　case 'b' : 　　　　　　if ('・' !== e.value) { 　　　　　　　this.e.value = e.value; 　　　　　　　e.form.submit (); 　　　　　　} 　　　　　　break; 　　　　　} 　　} }; document.addEventListener ('click', hoge, false); </script>

質問者