datalistでコンボボックス（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 18日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 18 日目 今日は <datalist> です。コンボボックスを作れます。 <datalist> – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrdEeZ 基本的な使い方 <select> のように複数の <option> を子に持ちます。画面には描画されません。連携したい <input> の方からは ID を list 属性で指定します。 <input list="my-list" /> <datalist id="my-list"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
autoComplete.js - 簡単に使える入力補完ライブラリ MOONGIFT
ユーザにテキストを入力してもらう際に何らかの入力規則を設けることがあります。面倒なのは文字数チェックなどではなく、データベースに入っているものから選んで欲しい場合です。入力が終わってからデータベースと付け合わせるのでは面倒であり、入力しながら候補をリストアップできると便利です。 そこで使いたいのがautoComplete.jsです。Webベースの入力補完ライブラリです。 autoComplete.jsの使い方 実際に使っているところです。文字を入力するたびに候補が絞り込まれます。 autoComplete.jsでは入力した文字がちゃんと繋がって意味をなすStrictモードの他、文字が離れていてもいいFuzzyモードが用意されています。より多くの候補を出したい場合にはFuzzyモードが便利です。他のライブラリへの依存はなく、逆に別なフレームワークとも自由に組み合わせられるでしょう。 auto
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力のサポート、任意のプレフィクス、任意のキーワードを区切り文字にする、これらを組み合わせる、などが主な特徴になります。尚、電話番号に関しては国別に別スクリプトが用意されています(日本ならcleave-phone.jp.js)。結構使いやすくて応用もききやすい印象でした。ライセンスはApache 2.0。 Cleave.js
Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
lufo - 最近選択したドロップダウンの項目を優先表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのフォームで何度も同じドロップダウンの項目を選択していると、項目を一番上に持っていって欲しいと考えるでしょう（都道府県、国名など）。しかし自分にとっての優先項目と他のユーザにとっての優先項目は異なります。 そこで使ってみたいのがlufoです。HTML5を使うことでスマートに解決しています。 lufoの使い方 lufoは任意のドロップダウンに対して設定できます。jQueryが必須です。 はじめは普通のドロップダウンですが、一回選択するごとに最近選択した項目としてリストの上に出るようになります。これは選択した項目をlocalStorageに残しておくことで、次に表示した際に再現してくれます。これならば個人のブラウザにしか依存せず、かつ自分はどんどん使い勝手が良くなるでしょう。 l
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
![[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
フォームインプットメーカー - フォーム入力を自動化するブックマークレット MOONGIFT
Web開発時においてフォーム入力ほど面倒なものはありません。入力しては送信し、ちょっと変更してはまた入力し…とエンドレスに入力が求められます。こんな作業こそ自動化したいポイントじゃないかと思います。 ということでフォームインプットメーカー（FIM）を使ってみましょう。予め入力内容を定義することで値を一気に入力するブックマークレットができあがります。 フォームインプットメーカーの使い方 フォームインプットメーカーの画面です。こんな感じでnameと値を定義していきます。 作り終わったら作成ボタンを押すと、専用のブックマークレット（緑色のボタン）が生成されます。これを実行するとフォームに自動入力されます。 フォームインプットメーカーを使えばデータの入力がぐっと楽になりそうです。以前の入力内容は保存されていますので、再編集も簡単にできるようになっています。 フォームインプットメーカーはHTML5/
郵便番号から住所検索するjQueryライブラリ - 技術ブログ
今までajaxzip3を使っていたけど、たまにjsの読み込みが遅いときがあって、違うのを探してみたところ、jQuery.zip2addrというライブラリを発見。 これの特徴は、 ・Google日本語入力APIを使っている ・httpとhttpsを気にしなくて良い ・導入がとにかく簡単 ・jsをローカルに置ける(ページの読み込みが遅くならない) 少し使ってみたけど、ajaxzip3より早くてよさそう。 著者に感謝して使用させていただきますm
8181801威尼斯(百度Vip认证)官方网站
系统提示 抱歉 可能是由下列问题导致的： 您访问的页面未找到， 5秒后自动跳转到8181801威尼斯
Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou
2KB minified & gzipped! Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because <datalist> still doesn’t cut it. Demo (no JS, minimal options) Pick a programming language: Note that by default you need to type at least 2 characters for the popup to show up, though that’s super easy to customize. With Awesomplete,
オンライン フォームを入力しやすくするために
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
timedropper jQuery time plugin
DateDropper datedropper JS is a Pure Javascript user-friendly date picker that allows users to easily select a specific date from a calendar-like interface. What does Datedropper do Datedropper streamlines date selection, saving time and reducing errors. This datepicker allows users to select the desired date by clicking on it. The selected date will then be displayed in the input field and can be
rangeslider.js
Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element. Download v2.3.0 This project is on GitHub. FeaturesTouchscreen friendlyRecalculates onresize so suitable for use within responsive designsSmall and fastSupports all major browsers including IE8+APIThe rangeslider.js API is compatible with the standard HTML input methods. $('input[type="range"]').va
Toscani: Payment Info Experiment
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Text Caret Position - テキスト入力時のキャレットの位置情報を取得 MOONGIFT
textareaにオートコンプリート機能を加えるライブラリ・「jQuery.textcomplete」
