history.back();問題を解決してみる at softelメモ
history.back()はブラウザの履歴を利用して1つ前のページに戻る機能です。これによりどのページから来た訪問者でも個々のユーザーに合わせたページへ戻ることができます。 この機能、多くのところでは以下のように書かれており、ブラウザからアドレスを入力して開いた場合は機能しません。 <a href="javascript:history.back();">一つ前のページへ戻る</a> 戻るリンクはそのサイトのトップなり1つ上のカテゴリページへ戻ることを意識してリンクをクリックしますので、動かなかったり、検索エンジンへ戻ったりするとユーザーはそのままサイトから離脱している可能性が高いです。 そこで対策を考えてみます。直接来た場合はトップページへ返すことを考えます。 まず、history.lengthで考えてみます。これは戻す、進むで使う履歴がいくつあるか取ることができます。ですので、直接開
フォーカスすると消えるテキストの作り方まとめ。
今回はinputやtextareaといったフォーム内に説明文を表示させておき、フォーカスすると消える仕組みをいくつか紹介します。定番のJavaSprictを使った方法からjQueryを使ったプラグインなど個人的に使いやすかったものをまとめました。ちっちゃい小技なんですけど用途に合わせてささっと使えるように備忘録。コメントフォームやサイト内検索などを作り込むのに便利な機能ですね。 HTML5で追加されたplaceholderがクロスブラウザに対応してくれれば手っ取り早く追記するだけなのでなんの苦労もないんですけど、こういった機能は対応するかしないかが曖昧ですね、揃い踏みしないんですよねえ、この手の追加されるプロパティ。まあ打つ手があるだけほんとマシなんだと考えないとダメなのかな。 今回はフォーム内に説明文を表示させておき、フォーカスすると消える仕組みをいくつか紹介します。コメントフォームやサ
jQuery Mobileによる問い合わせフォームの作成 (1/5)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
ページを開いた際、入力して欲しいフォームにフォーカスをあてる – masha.webTechLog
ページを開いた際、入力して欲しいフォーム部分に、 最初から自動でフォーカスをあててあげるスクリプト。 何気ない処理ですが、ユーザーには嬉しいですよねぇ。 JavaScriptでカンタンに仕込めます。 ■ある一つのフォームに必ずフォーカス <script type="text/javascript" language="javascript"> <!– document.forms[‘（formタグのname）’].elements[‘（formパーツのname）’].focus(); } //–> </script> ■複数のフォームを判定しつつフォーカス （○○の値が空なら○○にフォーカス、じゃなければ△△へフォーカス） <script type="text/javascript" language="javascript"> <!– var ○○ = document.forms[‘（
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編
以前にご紹介した 「jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト」 それを使って、今行っている案件をこなそうと思ったら、 ３つ程改良したい部分が出てきた。 一つ目はあらかじめ文字を出現させていて、 そのままsubmitされた場合、デフォルトの文字のままだった場合、 それを削除するというもの。 二つ目は、あらかじめHTMLの段階でvalueをセットしていた場合や、 以前入力していたのをあらかじめ表示させておくなどをした場合、 デフォルトの文字を表示させないようにするというもの。 ３つめは単純、フォーカスがあった部分の 背景の色を変えて、入力している部分がわかるようにするもの。 以上３点を加えたものを作ってみた。 ※2011/06/19 add jQuery1.2～1.2.6までは今回の方法でも動作しますが、1.3以降のバージョンでは、ボタンクリック時
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編) (2009-05-16)
いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。 まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。 <form action="hoge.php" method="get"> <p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p> </form> $(function(){ $("#q").focus(function() { if($(this).val() == $(this).att
[JS]フォームボタンまとめ
使用頻度の高いフォームボタンのメモ。 主にJavascriptを使用したものです。 XHTML形式のinputとbuttonの２タイプ用意してみた。 onclickとonkeypressを別のタグ（aとか）に書いても機能します。 ウィンドウを閉じる <input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" /> <button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button> このページを印刷 <input type="button" value="このページを印刷" onclick="window.print();" onkeypres
![[JS]フォームボタンまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
戻るボタンの実装方法について
■ 戻るボタンの実装方法について はてな が グリーン電力化とか良くわからない事を始めた ので、試しにTシャツの注文ボタンを押したのですが、この時フォーム内の「戻る」ボタンについて気が付いた事があったので、その事について。 フォームには一つ前の画面に戻るための「戻る」ボタンと、次の画面へ進むための「次へ」とか「送信」とかいうボタンが置いてある事が多いと思うのですけど、デザイン上とか何とかとにかく、「戻る」が左にあって「次へ」が右にある場合って HTML の記述ってどうすれば良いか悩みませんか？ 「次へ」は当然 submit ボタンなんですけど、「戻る」も submit ボタンにしてしまうと、入力フィールド上でエンターキーを押した場合に「戻る｣ボタンを押した事になってしまう。*1なんとなく「エンター＝進む」みたいな印象があるので、エンターキーで戻ってしまうってのはどうしても変だと感じるので嫌
入力エリアの初期値を自動でクリア | ヨモツネット
概要 type 属性の値が text の input や textarea 要素がフォーカスされるとあらかじめ入力された初期値が自動で削除されるスクリプトです。また、初期値の状態のときのみ、input 要素と textarea 要素に class 属性値に default-value が自動で付与されます。 WCAG1.0には 10.4 ユーザーエージェントが、空のテキストフィールドを正しく扱えるようになるまでは、デフォルトの文字を入れておくようにする。[優先度3] たとえばHTMLの場合は、TEXTAREA要素とINPUT要素にデフォルトの文字を入れるようにしてください。 動作確認用の demo ダウンロード 説明 HTMLの head 要素内などでこの JavaScript を読み込んでください。この JavaScript 内を変更する必要はありません。自動で全ての type 属性
都道府県一覧セレクトフォーム HTML用ひながた ahref.org
北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 <select name="pref_id"> <option value="" selected>都道府県 <option value="1">北海道 <option value="2">青森県 <option value="3">岩手県 <option value="4">宮城県 <option value="5">秋田県 <option value="6">山形県 <option value="7">福島県
実践！Webユーザビリティ研究室： 実践編：その2 「インプレスキャリア」
Webサイトのユーザビリティを、実例を基にわかりやすく紹介する「実践! Webユーザビリティ研究室」。今回は実践編の第2回として、転職支援サイト「インプレスキャリア」を取り上げます。 ● 求人/転職系サイトは「プロフィール登録」「検索」がキモ 今回取り上げるのは、インプレスのグループ会社であるインプレスキャリアが運営する転職支援サイト「インプレスキャリア」です。INTERNET Watchでは、各ページ右上の「転職支援」というボタンからリンクが張られていますので、これまでに訪問したことがあるという方も少なくないでしょう。 さて、このインプレスキャリアに限らず、いわゆる求人/転職系のサイトには、大きく分けて2つの機能があります。 1つは、職種や給与などの条件を入力して、自分にマッチする求人情報を探す機能です。サイトに魅力的な求人が掲載されていて初めて、ユーザーはサイトを利用するために会員登録
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社K-fix｜Web
IDEA * IDEA
IDEA * IDEA