概要 WebアプリのUIとしてフォームを作成する場合は、HTMLの<input>タグを利用する。 この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。 ここではその方法を解説する。 これでIMEがオンの状態になる。ime-modeは以下の値を取りうる。 * active: IMEをオンにする。ただし、ユーザはオフにする操作ができる。 * inactive: IMEをオフにする。ただし、ユーザはオンにする操作ができる。 * disabled: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。 議論 対応ブラウザについて このime-modeというスタイルはCSS3の標準ではない。 そのため、必ずしも全てのブラウザが対
先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓ struts+jQuery Form Pluginを使ったファイルアップロード① - わたしの日記だよ ですが、JavaScriptでファイルサイズをチェックする処理を入れていたものの IE8だとチェックが効かないよ！と言われてしまいました。 １．現在の実装 今のjsファイルはこんな感じ。（赤字の部分です） fileupload = function(event) { var $form, target; target = event.target ? event.target : event.srcElement; $form = $(target).closest('form'); return $form.ajaxSubmit({ 'target': "body", 'cache': false, 'befo
フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。 digitalBushのMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。 sponsors 使用方法 MaskedInputのjquery.maskedinput-1.0.jsに加え、jQueryが必要になります。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.maskedinput-1.0.js" type="text/javascript"></script> 上記のようにhead内にスクリプトを埋め込み、入力方式を固定したいinputの
はじめに Chromeでinputタグにfocusをした状態で上矢印か下矢印をクリックすると、ブラウザに保存されたテキストが出てきます。 こちらをmousedownで選択した際、mousedownもchangeもfocusもblurも発生しませんでした。 「autocomplete="false"にして解決☆」 みたいなことが各所に書かれていたんですが、ユーザーにやさしくないのでいろいろ検索していました。 setIntervalを回してちょっと前のvalueと比較というのもメンドクサイユーザーにやさしくないので避けたいです。 結果的に、jQueryであっさり解決したのでメモしておきます。 解決方法
はじめに テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。 change, keypress, keyupの挙動まとめ キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。 ポイント changeはフォーカスが外れたときに発生する keypressは全角やdelete,backspaceを入力しても発生しない keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう change changeイベントを使うと変更を検知できます。
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
どうすればいいのか調べたら、radioのdisplayをnoneにして、checkedの時にスタイル変えればCSSのみでいけるらしい。 .button-radio input[type="radio"] { display:none; } .button-radio label { display:inline-block; color:#fff; background-color:#2780e3; padding:5px 10px; } .button-radio input[type="radio"]:checked + label { background-color:#000; } <div class="button-radio"> <input id="bar1" type="radio" name="foo" value="bar1" checked> <label for=
やり方によるが、「二度押し」で解除させることができなくてハマった。 「もうお馴染みのラジオボタン」は1度選択したら最後解除できない、というのは利用者としてもおおむね常識だと思う。むしろ選択解除できるようにしたいものはプルダウンリストを使う。 スマートフォンだと、プルダウンで表現するとせっかくのタッチデバイスなのにいちいちツータッチ必要で面倒臭い、ラジオボタンにしてワンタッチにしたいという欲求が……ないですかね。 ところがラジオボタンだと選択解除ができないという。 jQuery Mobileでラジオボタンを利用すると、こうラジオボタンというより押しボタン式選択装置のような見た目になりますよね。で利用者としては「これ二度押ししたら選択解除できるんじゃね」と思いそう……ではないですかね。いやそうしてあげたい。 取り得る道として 上述通り二度押しで選択解除 クリアボタン ラジオボタンやめて排他選択
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
jQueryでフォームの入力地をリアルタイムで取得する方法を紹介します。 フォームのvalue値をリアルタイムで取得したい場合、必ずしも フォームのパーツからフォーカスが外れた時やクリック時とは限りません。フォームの入力値が変更されたことを取得していきます。 jQueryのchangeイベントがかなり便利 今日まで知らなかったのですが、フォームのvalue値が変更されたことを知るにはchangeイベントがかなり便利なようです。 プルダウンが変更されたら フォームのプルダウンが変更されたらvalue値がリアルタイムに変更されます。 ソースコード $("#select1 select").change(function () { var str = ""; str = $(this).val(); $("#select1 div").text(str); }).change();
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
type=”hidden” 画面上は表示されない隠しデータを指定する type=”text” 一行テキストボックスを作成する（初期値） type=”search” 検索テキストの入力欄を作成する type=”tel” 電話番号の入力欄を作成する type=”url” URLの入力欄を作成する type=”email” メールアドレスの入力欄を作成する type=”password” パスワード入力欄を作成する type=”datetime” UTC（協定世界時）による日時の入力欄を作成する type=”date” 日付の入力欄を作成する type=”month” 月の入力欄を作成する type=”week” 週の入力欄を作成する type=”time” 時間の入力欄を作成する type=”datetime-local” UTC（協定世界時）によらないローカル日時の入力欄を作成する type
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
