投稿フォームにふりがな自動入力機能を実装した場合に関してです。
AutoKanaからautokana.jsを
prototypeからprototype.jsを
それぞれダウンロードし、ヘッダーに読み込ませ、ふりがな自動入力機能が備わったのですが、
姓と名をそれぞれ分けて自動入力させたいのですが、分けるといずれか片方が無効となってしまいます。
<p>苗字<br>
<input type="text" id="name" name="name" size="20"></p>
<p>名前<br>
<input type="text" id="name2" name="name2" size="20"></p>
<p>
<input type="text" id="ruby" name="ruby" size="20">
<input type="text" id="ruby2" name="ruby2" size="20"></p>
上記のように記述した場合、autokana.jsとprototype.jsはどのように変更すればよいでしょうか？
姓名分けることができればどのような方法でも構いません。
ご教示頂けると幸いです。
宜しくお願いいたします。
No.2
1504
493
200pt
問題なく動作したと思います。id属性を見直してみてください。動かないコードも晒したほうがいいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="./javascripts/prototype.js" type="text/javascript"></script> <script src="./javascripts/autoKana.js" type="text/javascript"></script> </head> <body> <p>苗字<br> <input type="text" id="name" name="name" size="20"></p> <p>名前<br> <input type="text" id="name2" name="name2" size="20"></p> <p> <input type="text" id="ruby" name="ruby" size="20"> <input type="text" id="ruby2" name="ruby2" size="20"></p> <script type="text/javascript"> var auto_kana_1 = new AutoKana('name', 'ruby', {toggle:false}); var auto_kana_2 = new AutoKana('name2', 'ruby2', {toggle:false}); </script> </body> </html>
No.1
362107
ページにscriptを組み込む時、変数を分けてますか？
<script type="text/javascript"> var ruby = new AutoKana('name','ruby'); var ruby2 = new AutoKana('name2','ruby2'); </script>
回答ありがとうございます。
どこに記述すればよいのでしょうか？
私のソースは下に記述させていただきました。
頂いたソースを記述しても駄目でした。
最初に解決に至った回答をしてくださった方に200PT全て差し上げますので、宜しくお願いします。
autokana.jsとprototype.jsのソースはhttp://ceo.sourcelab.jp/archives/97で見れます。
私はここからこの2つをダウンロードしました。
姓と名に分割した場合、姓のみが自動入力され、名は自動入力されません。
ひとつのform内で分割させ送信したいです。
宜しくお願いいたします。
No.2
1504493
ここでベストアンサー
200pt
問題なく動作したと思います。id属性を見直してみてください。動かないコードも晒したほうがいいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="./javascripts/prototype.js" type="text/javascript"></script> <script src="./javascripts/autoKana.js" type="text/javascript"></script> </head> <body> <p>苗字<br> <input type="text" id="name" name="name" size="20"></p> <p>名前<br> <input type="text" id="name2" name="name2" size="20"></p> <p> <input type="text" id="ruby" name="ruby" size="20"> <input type="text" id="ruby2" name="ruby2" size="20"></p> <script type="text/javascript"> var auto_kana_1 = new AutoKana('name', 'ruby', {toggle:false}); var auto_kana_2 = new AutoKana('name2', 'ruby2', {toggle:false}); </script> </body> </html>
>頂いたソースで試してみましたが苗字しか自動入力されませんでした。
こちらは質問文にあった「AutoKana」というヒントから autoKana.js を使ったサンプルを提示しています。
スクリプトのパスが間違っていないか確認してみてください。
ここで動作確認。
http://jsfiddle.net/cherenkov/JYGyb/
また、auto_ruby.jsの場合はソースを見てもらえばわかるのですが、
var nameField = 'name'; //名前のID var rubyField = 'ruby' //カナのID
と、固定なのでこのままでは複数のフォームに対応できません。
autoKana.jsはそれに対応しています。
解決しました！ありがとうございます！
autoKana.jsじゃなくて変なのを読み込んでいたせいでした。
Cherenkovさんのおかげです。
1
1
1
2
1
58
44
>頂いたソースで試してみましたが苗字しか自動入力されませんでした。
こちらは質問文にあった「AutoKana」というヒントから autoKana.js を使ったサンプルを提示しています。
スクリプトのパスが間違っていないか確認してみてください。
ここで動作確認。
http://jsfiddle.net/cherenkov/JYGyb/
また、auto_ruby.jsの場合はソースを見てもらえばわかるのですが、
と、固定なのでこのままでは複数のフォームに対応できません。
2012/10/25 02:11:07autoKana.jsはそれに対応しています。
解決しました！ありがとうございます！
2012/10/25 07:10:36autoKana.jsじゃなくて変なのを読み込んでいたせいでした。
Cherenkovさんのおかげです。