【200pt】JavaScriptに関する質問です。

投稿フォームにふりがな自動入力機能を実装した場合に関してです。
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はどのように変更すればよいでしょうか?
姓名分けることができればどのような方法でも構いません。
ご教示頂けると幸いです。
宜しくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/10/24 18:59:38
  • 終了:2012/10/25 07:11:11

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/10/24 19:31:29

ポイント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>
他3件のコメントを見る
id:Cherenkov

>頂いたソースで試してみましたが苗字しか自動入力されませんでした。
こちらは質問文にあった「AutoKana」というヒントから autoKana.js を使ったサンプルを提示しています。
スクリプトのパスが間違っていないか確認してみてください。
ここで動作確認。
http://jsfiddle.net/cherenkov/JYGyb/

また、auto_ruby.jsの場合はソースを見てもらえばわかるのですが、

var nameField = 'name'; //名前のID
var rubyField = 'ruby'  //カナのID

と、固定なのでこのままでは複数のフォームに対応できません。
autoKana.jsはそれに対応しています。

2012/10/25 02:11:07
id:xptree

解決しました!ありがとうございます!
autoKana.jsじゃなくて変なのを読み込んでいたせいでした。
Cherenkovさんのおかげです。

2012/10/25 07:10:36

その他の回答(2件)

id:papa-tomo No.1

パパトモ回答回数362ベストアンサー獲得回数1072012/10/24 19:21:07

ページにscriptを組み込む時、変数を分けてますか?

<script type="text/javascript">
  var ruby  = new AutoKana('name','ruby');
  var ruby2 = new AutoKana('name2','ruby2');
</script>
他1件のコメントを見る
id:xptree

回答ありがとうございます。
どこに記述すればよいのでしょうか?
私のソースは下に記述させていただきました。

2012/10/24 22:40:19
id:xptree

頂いたソースを記述しても駄目でした。

最初に解決に至った回答をしてくださった方に200PT全て差し上げますので、宜しくお願いします。

autokana.jsとprototype.jsのソースはhttp://ceo.sourcelab.jp/archives/97で見れます。
私はここからこの2つをダウンロードしました。

姓と名に分割した場合、姓のみが自動入力され、名は自動入力されません。
ひとつのform内で分割させ送信したいです。
宜しくお願いいたします。

2012/10/25 00:48:29
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/10/24 19:31:29ここでベストアンサー

ポイント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>
他3件のコメントを見る
id:Cherenkov

>頂いたソースで試してみましたが苗字しか自動入力されませんでした。
こちらは質問文にあった「AutoKana」というヒントから autoKana.js を使ったサンプルを提示しています。
スクリプトのパスが間違っていないか確認してみてください。
ここで動作確認。
http://jsfiddle.net/cherenkov/JYGyb/

また、auto_ruby.jsの場合はソースを見てもらえばわかるのですが、

var nameField = 'name'; //名前のID
var rubyField = 'ruby'  //カナのID

と、固定なのでこのままでは複数のフォームに対応できません。
autoKana.jsはそれに対応しています。

2012/10/25 02:11:07
id:xptree

解決しました!ありがとうございます!
autoKana.jsじゃなくて変なのを読み込んでいたせいでした。
Cherenkovさんのおかげです。

2012/10/25 07:10:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません