jfjs

フォーム入力時の半角・全角変換や空白整理を、HTML の jf-func 属性だけで適用できる JavaScript ライブラリです。

特徴

• CDN や配布済みスクリプトを <script> タグで読み込むだけで利用可能
• jf-func 属性に変換ルールを並べるだけで適用可能
• IME 入力を邪魔しにくい blur ベースの整形
• IIFE ビルドでは window.JFJS.version を参照可能

使い方

<script src="https://example.com/jfjs.iife.js"></script>

<input
  type="tel"
  jf-func="trim delete-hyphen delete-comma digits-zen-to-han"
>

npm で使う

npm install @j-auth/jfjs

import '@j-auth/jfjs'

jfjs は import 時に document を検出すると自動で初期化されます。

CDN で使う

<script src="https://cdn.jsdelivr.net/npm/@j-auth/[email protected]/dist/jfjs.iife.js"></script>

対応要素

• input[type="text"]
• input[type="tel"]
• input[type="search"]
• textarea

主な変換

• trim
• delete-hyphen
• delete-comma
• digits-han-to-zen
• digits-zen-to-han
• alphabet-han-to-zen
• alphabet-zen-to-han
• symbol-han-to-zen
• symbol-zen-to-han
• kana-han-to-zen
• kana-zen-to-han
• char-han-to-zen
• char-zen-to-han

開発

npm install
npm run build

型定義ファイルもあわせて dist/ に出力されるため、そのまま npm パッケージとして配布できます。

npm 公開前チェック

npm run build
npm run pack:check

Docker で npm publish する

cp .env.example .env

.env に npm トークンを設定したら、そのまま自動公開できます。

docker compose -f docker-compose.publish.yaml up --build

実行内容:

• npm install
• npm whoami
• npm run build
• npm run pack:check
• npm publish --access public

公開が完了するとコンテナは終了します。失敗した場合はその場で終了し、ログに理由が残ります。

ドキュメントサイト

公開用 Web ページは同一ルート配下の ../jfjs-doc へ分離しました。ローカルでの配置と同期手順は docs/repository-split.md を参照してください。