Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT

テクノロジーカテゴリーの変更を依頼記事元:

www.moongift.jp

38 usersがブックマークコメント

記事へのコメント2件

注目コメント
新着コメント

megazalrock さらっとドキュメント読んだ所、入力不能な文字を入れた時に何もフィードバックが無い（その実装が無いっぽい）のが微妙かな。エラー時のイベントなりコールバックなりは設定したい。

2016/07/29 リンク

habuakihiro ふむふむ

2016/07/29 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.moongift.jp%2F2016%2F07%2Fcleave-js-web%25E4%25B8%258A%25E3%2581%25A7%25E3%2581%25AE%25E5%2585%25A5%25E5%258A%259B%25E3%2581%25AB%25E3%2583%2595%25E3%2582%25A9%25E3%2583%25BC%25E3%2583%259E%25E3%2583%2583%25E3%2583%2588%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://www.moongift.jp/2016/07/cleave-js-web%E4%B8%8A%E3%81%A7%E3%81%AE%E5%85%A5%E5%8A%9B%E3%81%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%82%92%E6%8C%87%E5%AE%9A/">Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT</a><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2016/07/cleave-js-web%E4%B8%8A%E3%81%A7%E3%81%AE%E5%85%A5%E5%8A%9B%E3%81%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%82%92%E6%8C%87%E5%AE%9A/">はてなブックマーク - Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT

HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されてい... HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方よくあるクレジットカードの入力フォームです。桁数の制御はもちろん、カードの種別も出るようになっています。電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり