0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

autoKanaを利用してフリガナを自動入力させる

Last updated at Posted at 2020-06-18

#問題
名前を記入するフォームとそのフリガナを記入するフォームに関して、名前を入力したタイミングで自動的にフリガナ用フォームにフリガナが記入されるようにしたい。

#手順
以下の記事を参考にさせていただいた。
https://testtesttest21.sakura.ne.jp/wp/2018/04/25/%E7%AC%AC1%E5%9B%9E%E3%80%8C%E3%83%95%E3%83%AA%E3%82%AC%E3%83%8A%E3%81%AE%E8%87%AA%E5%8B%95%E5%85%A5%E5%8A%9B%E3%80%8Dautokana%E3%80%80jquery%E3%83%BBjavascrip/

①GitHubよりautokanaのコードを引っ張ってくる。アセットパイプライン下にautoKana.jsファイルを作成し、コピペする。
(私の場合/javascripts/shared 内)

②viewファイル作成

hoge.html.slim

= simple_form_for @hoge, url: hoge_path do |f|
  #formタグにidをつける
  = f.input :name, input_html:{id: 'name'}
  = f.input :name_kana, input_html:{id: 'name_kana'}

③autokanaのメソッドを使用する旨を書いたjsファイル作成。
(私の場合/javascripts/pages/samples 内)

hoge.js
$(document).ready(
 function() {
    $.fn.autoKana('#name', '#name_kana', {
      katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
  });
});

すると
コメント 2020-06-18 190257.jpg

できた。
(画面のキャプチャを動画でとる方法わからない)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?