クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
ユーザにテキストを入力してもらう際に何らかの入力規則を設けることがあります。面倒なのは文字数チェックなどではなく、データベースに入っているものから選んで欲しい場合です。入力が終わってからデータベースと付け合わせるのでは面倒であり、入力しながら候補をリストアップできると便利です。 そこで使いたいのがautoComplete.jsです。Webベースの入力補完ライブラリです。 autoComplete.jsの使い方 実際に使っているところです。文字を入力するたびに候補が絞り込まれます。 autoComplete.jsでは入力した文字がちゃんと繋がって意味をなすStrictモードの他、文字が離れていてもいいFuzzyモードが用意されています。より多くの候補を出したい場合にはFuzzyモードが便利です。他のライブラリへの依存はなく、逆に別なフレームワークとも自由に組み合わせられるでしょう。 auto
Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力のサポート、任意のプレフィクス、任意のキーワードを区切り文字にする、これらを組み合わせる、などが主な特徴になります。尚、電話番号に関しては国別に別スクリプトが用意されています(日本ならcleave-phone.jp.js)。結構使いやすくて応用もききやすい印象でした。ライセンスはApache 2.0。 Cleave.js
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字(ダッシュなど)を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse
系统提示 抱歉 可能是由下列问题导致的: 您访问的页面未找到, 5秒后自动跳转到8181801威尼斯
Inspired by Square Wallet Download .zip Download .tar.gz View on GitHub Notes Right now, the two-digit year only allows for 12-29. Which is fine, but there's no support for automatically updating this when the year changes. We would have to update the mask manually. Might be better to leave it alone and allow server/client validation to handle this case in production. Auto-focus only works on the
株式会社人気組, ajaxzip3, 郵便番号検索ajaxzip3 世界一、簡単に設置できる郵便番号検索を目指して! 設置サンプル このページのHTMLソースコードを確認してみてください。 ajaxzip3は既存のHTMLページにたった2行のコードを加えるだけで設置できます。 プログラミングやサーバの設定は必要ありません。 郵便番号を入力すると自動的に住所が表示されます。 1ボックスで郵便番号7桁を入力させる場合の設定例 都道府県と以降の住所を分ける場合 郵便番号: 都道府県: 以降の住所: 都道府県と以降の住所を分けない場合 郵便番号: 住所: 郵便番号を3桁-4桁形式で入力させる場合の設定例 郵便番号:- 都道府県: 市町村区: 以降の住所: Powered by 株式会社人気組
typeahead.js a flexible JavaScript library that provides a strong foundation for building robust typeaheads
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。1つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く