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
Fig
Dear Fig users, Effective September 1, 2024 we have ended access to Fig. We encourage users to migrate to Amazon Q for command line. It’s free on the Individual tier and is designed to be faster and more reliable than Fig. To make this transition as easy as possible, users can upgrade to Amazon Q for command line directly from the Fig dashboard. With hundreds of thousands of users, 22k GitHub star
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS
VS Code でEmmet使ったらHTML書くの速くなった～‼
背景 個人的に一番使いやすいなと思っているエディタが VScode です。 標準で使えるEmmetというとても素敵な機能があるのですが 先日まで知らなかったので、ワタシのような方に向けてお知らせしようと思いました。 Emmetって？ Emmetは、HTMLとCSSのワークフローを大幅に改善できるWeb開発者のツールキットと公式にあります。 要はHTMLとCSSを書く際の手数を大幅に減らしてくれる便利なツールなのです！ 本当、今までHTML書いていた時間が。。。モッタイナ 知らなかった自分を悔いてしまう そんな素敵なツールです。 まずは見てみましょう 手順は htmlファイルを用意し、VSCodeで開きます。 !（ビックリマーク)を入力して Tab 押します。 これだけでHTMLのひな形を↓入力してくれます。便利すぎですよね。 <!DOCTYPE html> <html lang="en">
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
神速！Googleカレンダーのショートカット操作術！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
表示切り替え 表示期間をキーボードのキーひとつで切り替えがサクサクできます。 今日 t Todayのtを押すと今日の日付、かつ今の時間帯に移動フォーカスしてくれます。 先の予定を見たあと、一気に戻る際に便利です。 1日 d or 1 Dayのdを押すと1日の表示に切り替わります。 1週間 w or 2 Weekのwを押すと1週間の表示に切り替わります。 私は基本的にこの1週間のビューでカレンダーを見ています。 1ヶ月 m or 3 Monthのmを押すと1ヶ月の表示に切り替わります。 次の期間 j 待っていました！ ご存知Vimのキーバインドでもあるjです。 ちなみにNextのnでも同じ挙動になります。 前の期間 k 続けて、同じくVimのキーバインドでもあるkです。 ちなみにPastのpでも同じ挙動になります。 フォーカス系 このショートカットを使用すると入力欄にフォーカスされ、クリック
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
パス全部打ってられっかーい！cdを神化するツール「enhancd」を導入する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまさくにです。 さて、僕らは人生で何回cdコマンドを打つことになるのでしょう。わかりません。わかりませんが、膨大な数を打つことになるのは明らかです。僕はFinderもあまり開かないので、だいたいのディレクトリへターミナルで移動します。lsコマンドか、cdコマンドが人生でもっとも打ち込むコマンドになるでしょう。 ターミナルを開く、cdと打って~からワークディレクトリへ移動する。気がつかなければ、それが普通の、極めて平穏な日々。ターミナルを開く。cdを打つ。タブ補完便利だなぁと思いながら何階層も下のディレクトリに潜り、息継ぎをするように上位階層に上がってくる。またcdを打ち、長いパスを入れる。毎日はその繰り返し。平和でした。でもある日、雷に打たれたように気づいてしまったのです。 不毛だ……。 思えば、酷い不毛なルーティーンでした。毎日同じディレクトリに行くの
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>
Clink - コマンドプロンプトを便利に変身 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Windowsのコマンドプロンプトを使っていると、ターミナルに比べてあまりに貧弱な機能でストレスを感じてしまいます。Windows10ではUbuntuが使えるようになったとは言え、コマンドプロンプト操作のためだけにインストールするのは大げさですし、Cygwinを入れるのも面倒でしょう。 そこで使ってみたいのがClinkです。Clinkを通すことでコマンドプロンプトが多機能になります。 Clinkの使い方 タブキー2回でコマンドを出してくれるようになります。これだけでもかなり便利ですね。 入力補完も付いています。 ClinkはReadlineの他、GitやSubversionコマンドが使えるようになります。さらにクリップボード操作ができたり、Luaによるスクリプト機能も追加されます。
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のサイトはたくさんあり
[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/
Mojibar - Mac OSX用の絵文字パレット
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、絵文字が注目を集めています。GitHubのようにコメントで入力するだけでなく、URLにしてしまっているケースやブログ記事の中でも使われるようになっています。市民権を得た存在と言えるでしょう。 そんな絵文字をMac OSXから手軽に扱えるようにしてくれるのがMojibarです。任意のアプリで使える便利なツールです。 Mojibarの使い方 Mojibarを起動したら、Ctrl+Shift+スペースキーを押します。そうすると下の画像のようにパレットが表示されます。 そしてそのまま絵文字の文字を入力するとインクリメンタルに絞り込まれていきます。 矢印キーで絵文字を選択して、エンターキーを押すとクリップボードにコピーされますので、任意のサイトやテキストエディタに貼り付けできます。 M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Text Caret Position - テキスト入力時のキャレットの位置情報を取得 MOONGIFT
Google Maps Javascript APIでフォームでの住所入力を自動補完する・「Autocomplete for Addresses and Search Terms」
textareaにオートコンプリート機能を加えるライブラリ・「jQuery.textcomplete」
