JavaScript - フォーム周り

入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく

Result See the Pen Image Password Strength - #046 of #100Days100Projects by kachibito (@kachibito) on CodePen. ...

簡易的なダークモード

Result See the Pen Smarter inverted “dark mode” by kachibito (@kachibito) on CodePen. 簡単なダークモードを少しのCSSとJSで実装す...

フォームの内容を元に任意のUIに遷移

Result See the Pen CSS Grid: Form to Badge by kachibito (@kachibito) on CodePen. フォームの内容から別のUIに遷移する、みたいなの ...
Ads

placeholderにテキストをランダム表示する

Result placeholderのテキストを複数ランダム表示する jQuery html via flex-box nav with random placeholders

表示されている画像を任意の画像に変更する

Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery html via jquery-imgedit

複数inputに入力された数字の合計を表示する

Result jQuery 複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html via jQuery: Calculate Sum Of a...

リスト内で指定したキーワードにマッチする項目だけハイライトする

Result input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。 jQuery html via jSearch

チェックボックスで制限された数以上のチェックをされた際にアラートを表示させる

Result チェックボックスの数を制限する時に。 jQuery via How to limit the number of selected checkboxes?

アップロードするファイルの名前、サイズ、コンテンツタイプを取得する

Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery html via Stack O...

textareaで行ごとにナンバリングする

Result コード見せたいけどSyntax highlight使うほどじゃない時とかに。gistでいいんじゃ、と言われたらそれまでですが。 jQuery css html foobar hogehuga via...

inputやtextareaで、指定した文字数を超えた際に警告文を出す

Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery html via Maximum Characters lim...

input要素にフォーカスするとツールチップが出るようにする

select要素に応じてフォームの要素を複数表示する

入力フォームにフォーカスしたらツールチップを出す

マウスを乗せるとフィードバック用のフォームが出る

パスワードの表示/非表示をチェックボックスでスイッチできるようにする

検索窓にフォーカスしたらボックスのサイズが変わる

チェックボックスにチェックしたら他のも全部選択出来る

HTML5と併用してアニメーションするプログレスバー

input要素をクリックすると中のテキストを全部選択出来る

select要素内に年月日などの数字を自動生成する

テキストを入力するとテキストエリアが広がる

Ads