input

トラストバンク開発部・フロントエンドチームの君田（きみた）です。 本日はinputタグのpattern属性について書いていこうと思います。 フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。 そんなときに少しでも役に立てれば嬉しいです。 patern属性について pattern属性とはinput要素に正規表現を適用させることができる便利な属性です。 どんなinput要素にも指定できるわけではなく、以下のtype属性を指定した場合に有効になります。 text tel. email url password search 正規表現を設定することによって、入力欄が空文…

どうも皆さんこんにちは！kwです！ 今回は、HTMLで入力欄を作成する方法を紹介します。 これができるようになると、お問い合わせフォームなどを作ることができ、使いこなすととても便利な技術なので是非覚えていってください！ 1.入力欄の作り方 2.inputタグの別の使い方 1.カラーピッカー 2.チェックボックス 3.パスワードの入力欄 3.まとめ 1.入力欄の作り方 入力欄を作る方法はとても簡単です！ 入力欄を作るには、inputというタグを使います。 こんな感じで使います↓ See the Pen Untitled by kw (@kw-webd) on CodePen. どうです？ものすご…

<video>に読み込んだ動画の秒数を取得する - なんでもノート に続きtipsの3個目。でファイルを選択し、再度同じファイルを選択しても1度目のvalueが残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の最後にvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。 const ref = React.useRef<HTMLInputElement>(null); const onChange = (e: React.ChangeEvent<HTMLInputElement>)…

最近使ったtipsを1つずつブログにまとめておこうと思う。1つ目はで選択したファイルのサイズを取得する方法。以下、React + TypeScriptでのサンプルコード。 const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => { const fileSize = e.target?.files?.[0]?.size; console.log(fileSize + " Bytes"); } // …(中略)… <input type="file" onChange={onChangeFile} />

こんにちは。 じゅんたろうです。 PMPのInputとOutputのつながりをまとめたいと思います。 ・変更要求→承認済み変更要求 ・承認済み変更要→求変更要求 ・成果物→検証済み成果物→受入済み成果物→最終プロダクト、サービス、所産の移管 ・作業パフォーマンスデータ→作業パフォーマンス情報→作業パフォーマンス報告書

どうもてぃ。 CSS力向上を願ってtips記事を書いていきたいと思います。 TL;DR input:focus-visible { outline: 1px solid #ddd; } // もしくは input:focus { outline: 1px solid #ddd; } inputを装飾している場合… focus時にoutlineで強調すると、inputにborder-radiusを使っていた場合outlineがradius化してくれず若干違和感を感じる挙動になります。 そんなときは outline: none;にしてbox-shadowで装飾しましょう。 See the Pen …

どうも！LSSです！！ 今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。 HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。 （←こういうものですね） クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。 例えばこんな仕掛けとか。 【CSS】カードをめくる その３ idを使わない版 - Little Strange Software このブログでもいくつかサンプルを作成・公開していますが、「勉強し…