menu
menu

フォームの自動カナ入力 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook11
  • はてなブックマーク6
  • Google+1
  • Pocket0
  • Twitter0

フォームの自動カナ入力

  • Labs

jQuery

こんにちは(・∀・)

 入力フォームに名前を入力すると同時に、カナ設定してある入力フォーム部分に自動でカナをふってくれるという便利なjQueryライブラリがありますのでご紹介します。

漢字で名前を入力したら自動でカナを振ってくれるライブラリ

 日本語のカナ入力に対応したjQueryライブラリです。

 こちらのhttps://github.com/harisenbon/autokanaからダウンロードしてください。


【設置方法】

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。それとあわせて同じく<head>内にhttps://github.com/harisenbon/autokanaからダウンロードしたjquery.autoKana.jsを読み込みます。



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.autoKana.js"></script>
サンプルデモ
HTML

<label for="username">名前</label>
<input type="text" name="name" id="username">
<label for="username_kana">なまえ</label>
<input type="text" name="name2" id="username_kana">
JavaScript

$(document).ready(
function() {               
$.fn.autoKana('#username', '#username_kana', {
katakana : true //true:カタカナ、false:ひらがな(初期値)
});
});

 注意点として、コピペされたテキストやローマ字には対応しておりません。また、オートコンプリートによる入力にも対応しておりません。テキスト入力の途中で漢字を確定してしまうとその後に入力したテキストはカナ入力されません。一度フォーカスを外してもう一度フォーカスするとカナ入力されます。


 いかがでしたでしょうか。ユーザーフレンドリーで、上手く組み合わせればとても使い勝手の良いプラグインではないでしょうか。


ダウンロード

 https://github.com/harisenbon/autokana

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク6
  • Google+1
  • Pocket0
  • Twitter0