<input type=
どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:file').css({ //元々のファイルフォームを隠す。 'opacity':0, 'display':'none' }); $('a').on('click', function(e) { //装飾用のリンクをクリックしたタイミング $('input:file').click(); //ファイルフォームをクリック e.preventDefault(); }); 実はこのままだと
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないというトラブルがありました。 普通は自分の入力ミスを疑うところですが、登録もログインもコピペで入力しているので入力ミスはありえ無いと思っていました。 お問い合わせフォームからバグ報告 というわけでこれはバグだろうと、お問い合せフォームから以下のような内容の報告
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」
HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」jQueryプラグイン「jQuery-Placeholder」を紹介します。 jQuery-Placeholder １．基本 HTML5のplaceholder（プレースホルダー）属性は、フォームのテキストフィールドやテキストエリアに淡い色のテキストを表示する機能です。 HTML <input type="text" placeholder="入力してください" name="foo" value="" /> 実際の表示 HTML5のプレースホルダーをサポートしていないブラウザではplaceholder属性のテキストは表示されませんが、jQuery-Placeholderプラグインを利用すれば表示されるようになります。IE6などでも大丈夫です。 これで、focus()
フォームへの入力をすばやく簡単に
+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
placeholder 属性と jQuery で IE にもプレースホルダを
フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。 HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
input に onfocus で背景色や文字を消す はじめてのブログデザイン
検索窓やテキスト入力フォームなどの input 要素に使えるデザインの小技です。簡単な JavaScript で実装できるので皆さんも挑戦してみてはいかがでしょうか？ まずは下のサンプルをご覧ください。 カーソルを上の「サンプル検索窓」と表示されたテキストボックスに合わせクリックしてみてください。 どうでしょう？ 検索窓にテキスト（文字）を入力可能な状態にすると「サンプル検索窓」と表示されていたテキストが消え、背景色が薄いグレイから白に変わったのが分かりましたか？また、選択状態を解除（他の部分をクリックで解除できます）で初期状態に戻ります。 なかなか地味な小技ですが、本当のお洒落とは地味なところで差がつくと誰かがどこかで言っていたような気がします・・・。 それはともかく、お洒落とは関係なく使い道によってはユーザビリティ（使いやすさ）も多少アップするのでは？なんて考えから、今回ご紹介させて頂
アウトプットしない情報はインプットじゃない -- インプットの質を高めるために必要な4つのこと | TECH SEVEN
Tweet 以前、とある勉強会で百式やIDEA*IDEAなどの人気ブログを運営する田口さんが「アウトプットしないものはインプットじゃない」ということを言っていた。 いま思うと、この言葉は私が情報収集で陥ってしまった悪循環から救い出してくれたのかもしれない。 情報が溢れる現代において「どの情報を得るか」は非常に重要なことで、意図的に取捨選択しなくてはならない。では、選択する情報の基準をどのように設ければ良いのだろうか。 私が陥ってしまった過ちと、インプットすべき情報の基準について考えてみたい。 私が陥ってしまったインプット病 インプットすべき情報の基準の話をする前に、私が陥ってしまった「インプット病」というべき病の話をしたい。 私はブログの記事を書いたり、Twitterで有益な情報を流したりすることを習慣としており、その為に日々たくさんの情報に目を通している。スリム化を図る前は100程度のR
携帯サイトで入力フォームで入力文字指定を設定する方法。 - ソウマクリップ
Webデザインやネットマーケティングのアイディアをクリップしています。現在は横浜にあるブライダル企業を担当するWedデザイナー。自社サイト運営ならではの「ギャップ」や「発見」のメモや雑記。 ケータイの特性上、仕方の無い部分かもしれませんがモバイルサイトの場合、PCサイトと違い、フォームに文字を入力をする際に文字の切り替えが少し面倒です。ですので、たとえばメールアドレスのように半角英字しか入力する必要の無いところにはデフォルトで半角英字を指定して、すぐに入れられるようにしたり、少し工夫をしてユーザへのストレスを軽減することが必要かもしれません。他にも名前の場合には「全角かな」であったり、電話番号なら「半角数字」を指定する方法が3キャリアごとに違うので、まとめてみました。詳細は以下の通り。 istyle="1" 半角カナモード istyle="2" 半角英字モード istyle="3" 半角数
ファイルアップロードのinput type="file"にsize属性とwidthスタイルを適用してみたテスト - kanonji’s diary
ファイルアップロードのinput要素の横幅の扱いが、各ブラウザで異なるようなので、まずは比べてみました。 概要 input要素は下記の4種類を比べてみました。 size属性もwidthも無し。 size="30" width:300px; size="30" と width:300px; あ、size="30"とwidth:300px;は、別に同じ長さになるかとか確認してないです。 結果 下のほうに、スクリーンショットと、使用したhtmlソースコードがあります。 WebKit系のSafariとChromeは、そもそもinput type="file"で生成されるUIが特殊です。 size="30"だと短すぎた可能性もありますが、widthは正しく反映されているような雰囲気です。 IE6とOperaは、割と期待通りの動きをしている気がします。 sizeが有効で、widthが設定されれば、さら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
input type = password autocomplete = off は使ってはいけない
jQueryでフォームのlabel要素をinput内に表示し、フォーカスしたらスライド、入力中は非表示にする - かちびと.net
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発