• ベストアンサー

テキストフォームの入力誘導

HTMLの入力フォームにbackgroundで背景の色を変え、初心者にもどこに入力すればいいかを分かりやすくするための、入力誘導機能を持つプログラムを作成しています。 一番上のテキストフォームはページが読み込まれた時から背景を変更してあります。次からがどうしていいかわかりません。 例えばテキストフォームにユーザが入力を終えEnterを押したときに入力し終わったテキストフォームの背景は消え、次のテキストフォームの背景を変えたいのですが。 イベントハンドラを利用してやると思うのですがやり方が解らないのでご教授お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

こういうこと？ 『カーソルが移動したらその項目の色を変える』 ANo1様のご意見に賛成なので、Enterを押したときの制御等は行っていません。（各ブラウザの反応のままになります） <html> <script type="text/javascript"> function set(elm,f){ flg=(f=='on'); elm.style.backgroundColor=flg?'Ivory':''; var p=elm.parentNode; if (p.nodeName=='DIV') { p.style.color=flg?'red':''; p.style.backgroundColor=flg?'Beige':''; } } </script> <body> <form action="" method="" id="fm1" style="width:250px;"> <div>入力1：<input type="text" name="name1" size="24" onfocus="set(this,'on')" onblur="set(this,'off')"></div> <div>入力2：<input type="text" name="name1" size="24" onfocus="set(this,'on')" onblur="set(this,'off')"></div> <div>入力3：<input type="text" name="name1" size="24" onfocus="set(this,'on')" onblur="set(this,'off')"></div> </form> </body> </html>

oborozuki1
質問者

補足

下の方ミスです。 書き込み有難う御座います。 入力して次のテキストエリアが選択されたら色を変えるのではなく、テキスト入力が完了しEnterが押されたらカーソルを移動しなくても次のテキストエリアの色が変わるようにしたいのです。 説明が下手でしたね。申し訳ありません。

その他の回答 (4)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.5

#1です。 ＞テキスト入力が完了しEnterが押されたらカーソルを移動しなくても次のテキストエリアの色が変わるようにしたい 普通、テキストフィールドでは入力完了を知らせるためにEnterキーを押すなんてルールはありません。 また、テキストフィールドが所属するform内にsubmitボタンがあれば、テキストフィールド内でEnterを押すと送信となります。 やりたい事はわからなくもないんですが、「入力完了」を感知する手段がないので次を示すタイミングがないんです。

oborozuki1
質問者

補足

書き込み有難う御座います。 確かに入力完了動作って決まってないですよね。 しかしEnterを押すことでフォームの色を変更するプログラムを作成したいと思っています。他にもTABや十字キーの↓を押しても同じ動作ができるよう何パターンか作成したいのです。

noname#84373
noname#84373
回答No.4

第三者に対して有害と判断されると削除されるのあれば これも削除の対象だよね！ //@cc_on /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function (){ 　document.forms[0].elements[0].focus(); 　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'keyup', function (evt){ 　　var o = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; 　　var n = o.nodeName; 　　var m = o; 　　 　　if (13 == evt.keyCode && 'TEXTAREA' != n && 'INPUT' == n ) { 　　　while (o = evt.shiftKey ? getPreviousNode(o): getNextNode(o)) { 　　　　n = o.nodeName; 　　　　if (('INPUT' == n || 'TEXTAREA' == n) && o.type !='hidden' && !o.disabled) 　　　　　{ o.focus(); return; } 　　　} 　　} 　}, false); 　function getNextNode (node) { 　　var n; 　 if (n = node.firstChild) return n; 　　do if (n = node.nextSibling) return n; while (node = node.parentNode); 　　return null; 　} 　function getPreviousNode (node) { 　　var n; 　　if (n = node.previousSibling) { 　　　while (n.hasChildNodes()) n = n.lastChild; 　　　return n; 　　} 　　return node.parentNode; 　} }, false);

noname#84373
noname#84373
回答No.3

タイマーを使って監視するってのは？ <input type="text" ><br> <input type="text" ><br> <input type="text" ><br> <input type="text" ><br> <script type="text/javascript"> var m; setInterval(function(){ var e = (document.activeElement || window.getSelection().focusNode); if (e != m) { if (m) m.style.backgroundColor = ''; if (e.nodeName == 'INPUT' && (e.type == 'text' || e.type == 'textarea'){ e.style.backgroundColor = '#f00'; m = e; } } }, 500);

oborozuki1
質問者

補足

書き込み有難う御座います。 タイマーもいい考えだとは思うのですができれば背景色を変えたいのです。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

まずは質問への回答でなくて失礼。 普通に作ったフォームで利用者が混乱することなどあるんでしょうか？ もし、直感的に操作できないとしたらまずはレイアウト等を見直す必要がある気がします。 また、項目ごとの入力の終わりにEnterを押させるような一般的ではない操作方法、固有のルール、入力順序の固定化などを検討するなら慎重になるべき。（初心者向けならむしろ一般的なルール・操作方法が覚えられるようにしたほうが親切だと思う） 入力誘導機能が必要になった状況の解決策をもうちょっと練りこんでみてはどうでしょう。

oborozuki1
質問者

補足

書き込み有難う御座います。 入力して次のテキストエリアが選択されたら色を変えるのではなく、テキスト入力が完了しEnterが押されたらカーソルを移動しなくても次のテキストエリアの色が変わるようにしたいのです。 説明が下手でしたね。申し訳ありません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HTML上での入力フォームについて

    HTML上での入力フォームについて質問です input で入力する欄が１００個以上あるのですが、どこを入力し終わったのかわからない状態で困っています。 input で入力した際に、入力したりしたら背景色をかえてユーザーに 「ああ、これは入力済みなんだな。」 とわかってもらえるようにするには、どうしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • フォーム入力中にEnterで送信しなくするには

    最近、ユーザさんがフォームを入力中、勢い余ってEnterを叩いてしまい、入力途中のものが送られてきてしまうことが多々あります。会社のシステムなのですが、Htmlで改善する方法がありましたらぜひ教えてください。cgi側で対応してもいいのですが、手間がかかりそうなので・・・よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • データシートビューとフォーム入力

    データシートビューとフォーム入力 アクセス2007使用しています。 超々初心者ですがよろしくお願いいたします。 データシートビューでデータを入力するとenter　keyで次の行に移ってくれますが フォームで入力するとenter　keyで次のページに移ってくれません 画面下にある、三角しるしを使用すると移動します、これをenter　keyで次ページに 移動できるようにしたいと思います。 簡単な方法教えてください。 よろしくお願いいたします。

  • ユーザーフォームに入力したデータを保持する方法

    VBA初心者です。いろいろ調べて徐々に進められていますが、、 こちらもなかなか見つからなかったので質問させていただきます。 現在、ユーザーフォームにテキストボックスをいくつか配置し、 さまざまな計算などをさせて、最終的にエクセルシートに反映させる。 といったことが出来るようにプログラムをしています。 ユーザーフォームのテキストボックスに一度入力したものを、 エクセルシートを閉じるまで残すことはできるでしょうか？ 一度、×ボタンで閉じてしまうと、次に呼び出したときには初期の状態になってしまいます。 ユーザーフォームに入力し、エクセルシートで確認、 その後 再度ユーザーフォーム呼び出して修正する といった作業をするために、一度入力したものが消えないようにしたいです。 よろしくお願いいたします。

  • エクセルVBAのユーザーフォーム上のテキストボックスについての質問です

    エクセルVBAのユーザーフォーム上のテキストボックスについての質問です。 Aのユーザーフォームの内容をBのユーザーフォームのテキストボックスへ引き継いで、Bのユーザーフォーム上で内容を編集するという仕組みにしたいのです。 Bのユーザーフォームは新規入力もかねたユーザーフォームなので、テキストボックスのイベントにAfterUpdateを使用して、テキストボックスの内容が書き換えられるとデータベースから検索して新規か既存か判断させています。 AのユーザーフォームからBのユーザーフォームのテキストボックスへ引継ぎさせるときにこのAfterUpdateを発生させたくないのですが、Application.EnableEvents=Falseなどを使ってもイベントが発生してしまいます。 また、イベントがどのタイミングで発生するかと、コードをステップで実行させると、このイベントは発生しません。そのために、いきづまってしまいました。 AのユーザーフォームからBに引き継ぐ処理 　ユーザーフォームB.Load ---ユーザーフォームBのイニシャライズが実行される 　ユーザーフォームB.テキストボックス = ユーザーフォームA.テキストボックス 　ユーザーフォームB.Show ちょっと簡単に書きすぎですがこんな感じです。 コードをステップで実行するとユーザーフォームBのAfterUpdateは実行されません。（VBAエディタのバグ？） どなたか回答お願いします。

  • ユーザーフォームに入力値を活用する方法

    エクセルのマクロについて質問です。 (1)ユーザーフォームのテキストボックスに数字入力 (2)「アクティブセル」から「アクティブセルの列数＋（入力した数字－1）」の列までのセルに背景色を付ける というようなマクロを作りたいです。 ユーザーフォームは設置できたのですがテキストボックスに入力した数字をセル選択に関連付ける方法がよくわかりません。 詳しい方がいらっしゃいましたらご教授いただければありがたいです。 例：アクティブセルが「G6」でテキストボックスには「3」と 入力した場合には G6、H6、I6の背景に色が付く

  • Flashテキスト入力

    Flashテキスト入力で、IDをユーザーが入力して、ENTERボタンを押すと入力画面が消えて、次へ進むことができる。 （この時、先程入力したID名が右上に表示された状態にしたい。） アクションスクリプト2で作りたいのですが・・・、すみません。かなり初心者なのでよろしくお願いします。

    • ベストアンサー
    • Flash
  • フォームの内容を暗号化するためには

    簡単な質問で恐縮なのですが、 WEBのフォームで入力内容を暗号化して送信するためには、 ・入力フォームのHTMLをSSLのページに置いて 　action先にもSSLのプログラムを指定 というのが一般的のように見えます。 これについて、実際はaction先さえ、SSLが指定してあれば フォームの入力内容は保護されると思うのですが、 入力フォームのHTML自体を暗号化してユーザーに送る必要があるのでしょうか？

  • C# テキストボックスについて

    フォームに置いたテキストボックスに フォーカスを入れると カーソルが点滅するごとに，オーバーライドした OnPaintのハンドラーにイベントが引っかかります。これは当然のことなのでしょうか？ カーソルが点滅したぐらいでPaint処理をするのはわずらわしいし不都合がある場合があります。 なので，イベントが引っかからない(起きない）ようにするか，または OnPaintハンドラー内において Paintイベントが起きたのはテキストボックスであるということを知る方法はないのでしょうか。

  • VBA　あるフォームのあるテキストボックスへ飛びたい

    教えてください エクセルのVBAで簡単な１問１答形式のプログラムを作っています フォームにある「次の問」を押したときに そのフォーム上に解答用のテキストボックスに 自動的に行く方法を教えてください 今は、「次の問」を押して マウスでそのテキストボックスをさらにクリックして 解答を入力するという状態です 上記の「マウスでテキストボックスをさらにクリックして」 という部分をなくしたいのです どうぞよろしくお願いします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する