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

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

ただいまの
回答率

90.52%

  • JavaScript

    16347questions

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

  • HTML

    8930questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6674questions

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

jQueryのプラグインの仕方を教えて下さい。

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 134

yukina1

score 0

 前提・実現したいこと

オートでカナ入力
やり方は、jqueryでプラグイン(なるべくダウンロード方式がいいです)

 発生している問題・エラーメッセージ

・プラグインができない
・CDNでのプラグインもできないし、ダウンロードでのやり方もわからないです。

エラーメッセージ

 該当のソースコード

<!DOCTYOE html>

<html lang="ja">

<meta chraset="utf-8">

<title>HTML課題</title>

<link rel="stylesheet" href="css/styles2.css">


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>


<body>
 <div class="box1"
 style="border: 2px solid skyblue;
 ,background-color:skyblue;">
  <h1>プロフィールを入力して下さい</h1>




    <form method="post">

      <p>
        <label for="name">名前:</label>
        <input tyoe="text" id="name" placeholder="名前を入力して下さい">
      </p>

      <p>
        <label for="name">カナ名前:</label>
        <input tyoe="text" id="name" placeholder="カナを入力して下さい">
      </p>



      <p>
        <label for="name">血液型:</label>
        <select name="example">


          <option value="A">A</option>
          <option value="B">B</option>
          <option value="AB">AB</option>
          <option value="O">O</option>
        </select>

      </P>
      <p>
        <label for="name">星座:</label>
        <if >
        <input tyoe="text" id="name" placeholder="星座を入力して下さい">
      </P>

      <p >
        <label for="name">出身都道府県:</label>

        <select name="pref">
          <option value="">出身都道府県を入力して下さい</option>
          <option value="北海道">北海道</option>
          <option value="青森県">青森県</option>
          <option value="岩手県">岩手県</option>
          <option value="宮城県">宮城県</option>
          <option value="秋田県">秋田県</option>
          <option value="山形県">山形県</option>
          <option value="福島県">福島県</option>
          <option value="茨城県">茨城県</option>
          <option value="栃木県">栃木県</option>
          <option value="群馬県">群馬県</option>
          <option value="埼玉県">埼玉県</option>
          <option value="千葉県">千葉県</option>
          <option value="東京都" >東京都</option>
          <option value="神奈川県">神奈川県</option>
          <option value="新潟県">新潟県</option>
          <option value="富山県">富山県</option>
          <option value="石川県">石川県</option>
          <option value="福井県">福井県</option>
          <option value="山梨県">山梨県</option>
          <option value="長野県">長野県</option>
          <option value="岐阜県">岐阜県</option>
          <option value="静岡県">静岡県</option>
          <option value="愛知県">愛知県</option>
          <option value="三重県">三重県</option>
          <option value="滋賀県">滋賀県</option>
          <option value="京都府">京都府</option>
          <option value="大阪府">大阪府</option>
          <option value="兵庫県">兵庫県</option>
          <option value="奈良県">奈良県</option>
          <option value="和歌山県">和歌山県</option>
          <option value="鳥取県">鳥取県</option>
          <option value="島根県">島根県</option>
          <option value="岡山県">岡山県</option>
          <option value="広島県">広島県</option>
          <option value="山口県">山口県</option>
          <option value="徳島県">徳島県</option>
          <option value="香川県">香川県</option>
          <option value="愛媛県">愛媛県</option>
          <option value="高知県">高知県</option>
          <option value="福岡県">福岡県</option>
          <option value="佐賀県">佐賀県</option>
          <option value="長崎県">長崎県</option>
          <option value="熊本県">熊本県</option>
          <option value="大分県">大分県</option>
          <option value="宮崎県">宮崎県</option>
          <option value="鹿児島県">鹿児島県</option>
          <option value="沖縄県">沖縄県</option>
        </select>
      </P>




      <p>
        <label for="name">郵便番号:</label>
        <input tyoe="text" id="name" placeholder="郵便番号を入力して下さい">
      </P>

      <p>
        <label for="name">住所:</label>
        <input tyoe="text" id="name" placeholder="住所を入力して下さい">
      </P>

      <p>
        <input type="submit" value="登録">
        <input type="reset" value="クリア">

      </p>





  </form>
  </div>

  <form>
  <label for="userName">氏名</label>
  <input type="text" id="userName" placeholder="こっちに漢字を書き込むと…">
  <label for="userNameKana">氏名カナ</label>
  <input type="text" id="userNameKana" placeholder="こっちにカタカナが勝手に入力される">
  </form>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $.fn.autoKana('xxxxx', 'yyyyy', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
  </script>

  <script src="../../public/javascripts/jquery-1.10.2.min.js"></script>
  <script src="../../public/javascripts/jquery.autoKana.js" language="javascript" type="text/javascript"></script>

  <div>
      <label for="user_name" class="">氏名</label>
      <input type="text" id="user_name">
  </div>
  <div>
      <label for="user_name_kana" class="">カナ</label>
      <input type="text" id="user_name_kana">
  </div>

  <script type="text/javascript">
      $(document).ready(
          function() {
              $.fn.autoKana('#user_name', '#user_name_kana', {
                  katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
          });
      });
  </script>


  <form>
  <label for="userName">氏名</label>
  <input type="text" id="userName" placeholder="こっちに漢字を書き込むと…">
  <label for="userNameKana">氏名カナ</label>
  <input type="text" id="userNameKana" placeholder="こっちにカタカナが勝手に入力される">
  </form>

  <script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#userName', '#userNameKana', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>


<!-- ▼郵便番号入力フィールド(3桁+4桁) -->
<input type="text" name="zip21" size="4" maxlength="3"><input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');">
<!-- ▼住所入力フィールド(都道府県+以降の住所) -->
<input type="text" name="addr21" size="40">



</body>
</html>

 試したこと

WEBで調べてコピーアンドペーストしました。

 補足情報(FW/ツールのバージョンなど)

私はまだプログラムを始めて一週間経ってないため変な質問をしてしまい、すいません。
今日の夜までの課題なので、回答していただけると助かります。

回答よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yukina1

    2018/07/19 20:07

    個人情報を入力するWEBページ作っているところです。 そこの1つの項目で氏名を書いたたら自動でカナ入力をしてくれるページを作る途中で躓きました。具体的には、CDNでプラグインしているつもりでしたが、それがうまくいかないという感じです。 字数がオーバーしたので、中身は抜いているところが多いです。

    キャンセル

  • yukina1

    2018/07/19 20:07

    ブラウザ開発ツールのコンソールにエラーのところから、あまり理解してないので、そこから学習します。変な質問してすいませんでした。

    キャンセル

  • 退会済みユーザー

    2018/07/20 17:08

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

+1

http://www.kawa.net/works/ajax/AjaxZip2/AjaxZip2.html

の後継で AjaxZip3 があったようですが、そもそも

ライブラリ自体がより新しいものに置き換わってますね。
yubinbango/yubinbango

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    jqueryでhtml要素の比較

    お世話になります。 jqueryでその要素がinputまたはselect要素なのかを比較したいときの方法がわからないので、教えていただきたいです。 $('input,s

  • 解決済

    radioボタンの.hideにつきまして

    以下のようにradioボタンとその選択肢のテキスト(良い、悪い)をhideしたいのですが、 ボタンだけ消えてテキストは隠せませんでした。 このinput要素をdivで囲みdiv

  • 解決済

    changeイベントで指定した時に、ある要素を表示する

    解決したいこと input[type=radio]でラジオボタンをチェックした時に、ある指定された要素を表示させたいです。 また、他のラジオボタンをチェックした時には、それまで

  • 受付中

    外部JSファイルの実行後に実行

    以下のようなコードで、セレクトボックスの変更によって、 ★の処理を実行したいのですが、 ページ最下部にある外部JSの処理が最後に行われてしまい、 ★の処理が完了後に外部JSの処理で

  • 解決済

    jqueryのdieとliveについて

    $(document).ready(function(){ $("#hogehoge").die("change"); $("#hogehoge").live("c

  • 解決済

    店ごとにカレンダーの休日の設定

    jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが… 実行したい内容 ・店(店舗A)を選択後、カレンダー通りに、選べるようにしたい。 ・店ごとの休日が異

  • 解決済

    JavascriptからHTMLフォームの送信内容を取得したい

    HTMLフォームにテキストボックスやラジオボタン、チェックボックスなど様々なタイプの入力欄があり、Javascript + jQuery で name ごとの値を取得したいと考えて

  • 解決済

    jQurey ですべてをチェック済みにするブロックが複数ある場合の対処方法

    実現したいこと HTML内に「全てをチェック」の[親]チェックボックスと、[親]チェックボックスにチェックが入ることで同時にチェックが入る[子]チェックボックスのブロックが複数ある

同じタグがついた質問を見る

  • JavaScript

    16347questions

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

  • HTML

    8930questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6674questions

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