TypeScript + React で作る checkbox の checked と defaultChecked を型で「排他」にしてエラー検知しやすくした話 - Qiita
import React, { FC } from 'react'; interface Props { checked?: boolean; } const Checkbox: FC<Props> = ({ checked = false }) => ( <input type="checkbox" checked={checked} /> ); export default Checkbox; 超最低限で書くと、こんな感じになります！ checked という Props を用意して、それを <input> に流しています。 流れてくる boolean によって、 checkbox の check 状態を制御できるようになっているわけです。 外部から <Checkbox checked={true} /> とすれば「check された状態」になりますし、 <Checkbox checke
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
PHP で $_GET $_POST で Notice: Undefined index: が出る : Serendip – Webデザイン・プログラミング
以下のような記述が .php 内にあった場合、Notice: Undefined index: id in /Users/foo/public_html/hoge.php on line n と表示される。 $id = $_GET['id']; これは、外部からの汚染された引数が渡されたことが原因なので、htmlspecialchars を使ってサニタイズすると警告が表示されなくなる。 $id = htmlspecialchars(@$_GET['id']); 上の方法では、@を使ってエラー出力を抑制しているだけ。 $_GET['id'] の値が初期化されていないためにエラーとなっているので、isset で初期化チェックをおこなう。 $id = isset($_GET['id']) ? htmlspecialchars($_GET['id']) : null; 修正：2011/6/1
チェックボックスを変更不可にする方法
フォームでチェックボックスを変更不可にする方法を紹介します。 １．はじめに ある案件で「フォームのチェックボックスをチェックしたままの状態（ユーザーが操作できない）にしたい」という要望がありました。 が、readonly属性ではチェックボックスは操作不可にできないようです。 <input type="checkbox" name="foo" value="1" checked="checked" readonly="readonly" /> また操作不可にするにはdisabled属性を追加するがありますが、disabledにするとそもそもフォームの送信対象から外れてしまいます。 <input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" /> ということで何かいい方法はないでしょうか。
inputに背景が勝手につくCSSの解決法
iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
jQuery.uploadプラグインで親要素のonsubmitを起動させない対処
以前紹介した「jQuery.uploadプラグイン」で、onsubmitを起動しない対処方法を紹介します。 １．「jQuery.uploadプラグイン」について 「jQuery.uploadプラグイン」はAjaxによるファイルのアップロードが行えるようにするためのプラグインです。 jQuery.upload ２．問題点 元のフォームにonsubmitなどのイベントがある場合、jQuery.uploadでファイルをアップロードするとonsubmitまで起動してしまいます。 具体的には、jQuery.uploadで選択したファイルをサーバにアップロードして、そこからファイル情報をJSONで取得してブラウザに表示させ、その内容がOKであれば本来のフォーム送信やファイルアップロードを行いたいのですが、最初のファイルアップロードでフォーム情報が送信されてしまいます。 元のフォームのonsubmitが
jQueryでセレクトボックス（プルダウンメニュー）のテキストを取得する
jQueryでセレクトボックス（プルダウンメニュー）のテキストを取得する方法を紹介します。 １．問題点 次のようなセレクトボックス（プルダウンメニュー）を用意します。 HTML <select id="foo" name="foo"> <option value="aaa">xxx</option> <option value="bbb">yyy</option> <option value="ccc">zzz</option> </select> jQueryを使ってセレクトボックスを変更したときに値「aaa」「bbb」「ccc」を取得するには、次のように記述します。 jQuery(function() { jQuery('#foo').change(function(){ var data = jQuery(this).val(); alert('セレクトボックスの値は「' + dat
CSSでoption要素を非表示にするときの不具合について
CSSでoption要素を非表示にするときの不具合について紹介します。 タイトルでは「不具合」としていますがブラウザの仕様かもしれません。認識誤りでしたらどこかでつぶやいてください。 １．option要素を非表示にするケース フォームの動作によっては、option要素の一部を非表示にしたい場合があると思います。 たとえばフォームに2つのselect要素があり、1つめのselect要素を選択した結果によって2つめのselect要素のoptionの表示を変更したいときなどです。 このエントリーでは事象の紹介だけにとどめ、解決方法は別エントリーしたいと思います。 ２．サンプル 事象を発生させるサンプルを作りました。 サンプル サンプルでは次のHTMLマークアップを用いています。 <select name="foo"> <option value="" selected="selected">-選
フォーム入力中に誤って消えてしまった文字を復活させるFirefox用アドオン「Textarea Cache」
問い合わせるために文章などをフォームに長々と入力しているときに、意図せずブラウザを閉じてしまって、文章を書き直すことがありますが、Firefox用のアドオン「Textarea Cache」を使えば、消えてしまった文章を簡単に元に戻すことができます。アドオンのインストールと操作方法については以下から。 Textarea Cache :: Add-ons for Firefox https://addons.mozilla.org/en-US/firefox/addon/textarea-cache/ Firefoxから上記サイトへアクセスし「＋ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「今すぐ再起動」をクリックして、Firefoxを再起動させればインストールの完了です。 ◆使い方 例えばHotmailなどを使ってメール本文を作成しているときに、誤ってブ
onclickイベントとjQueryのclickイベントを併用するときの注意
利用シーンはあまりないと思いますが、onclickイベントにjQueryのclickイベントを追加するときの注意点をまとめました。 次のようなレガシーな処理があると仮定します。 onclickイベントでsendというメソッドを呼び出し、フォームのチェック処理を行ったあとsubmit()を実行しています。 <script> function send() { // 既存のチェック処理など document.test.submit(); } </script> <form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;"> <input name="foo" id="foo" type="text" value="$foo" /> <input id="bar" type="butto
for 属性に対する属性セレクタの IE7 での挙動
IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。 label[for="foo"] { background-color: yellow; } この場合 for="foo" という属性を持つ label 要素の背景が黄色になるはずですが、IE7 では無視されてしまいます。これはどうやら for というキーワードが DOM の予約語であることに由来するバグのようです (参考: Attribute Selector (CSS selector) - SitePoint CSS Reference)。そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります。 label[htmlFor="foo"] { background-color: yellow; } ただこれだと IE8 以降やほかのブラウザが解
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
Google Chromeでfloatレイアウトが崩れる件について
Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。 １．サンプル サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。 (X)HTML（赤色が対象部分） <?xml version="1.0" encoding="euc-jp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equ
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface