1

長いフォームが含まれているページがいくつかあります。これらのフォームの一部は事前入力されており、フォームの上部に事前入力されたフィールドがある場合は、オートフォーカスを使用して、ユーザーがそのフィールドへの入力を自動的に開始できるようにします。

これらのフィールドに加えて、フィールドの横に「メモ」をポップアップ表示して、何を入力しているかについてより多くのガイダンスを提供することがあります。これらのメモは、ユーザーが入力フィールドにフォーカスしている場合にのみ表示されます。

フォーカスされた入力の横にフィールドを表示するコードは次のとおりです。

$('input[type="text"]').focus(function(){
    var hasCont = $(this).parent().siblings('.cont-note').length;
    if(hasCont == 1){
        $(this).parent().siblings('.cont-note').fadeIn(400);    
    }
});

残念ながら、これは html 入力のオートフォーカスでは機能しません。jQuery を使用してフィールドに集中するのは避けたいので、(変更を容易にするために) html を使用します。

私の目標は、オートフォーカスのある入力フィールドの横にメモがある場合は、メモを表示することです。

助言がありますか？

4

2 に答える 2

3

autofocus プロパティがあるかどうかに基づいて要素をフィルタリングし、フォーカス イベントをトリガーして、フォーカス イベント ハンドラーをトリガーするなどを行うことができますが、フォーカスを持つことができるのは 1 つの要素だけなので、first() を使用するとよいでしょう。考え ？

$('input[type="text"]').focus(function(){
    var hasCont = $(this).parent().siblings('.cont-note').length;
    if(hasCont == 1){
        $(this).parent().siblings('.cont-note').fadeIn(400);    
    }
});

$('input[type="text"]').filter(function() {
    return $(this).prop('autofocus');
}).first().trigger('focus');
于 2013-03-14T17:22:12.850 に答える
0

.attr（）関数を使用してみませんか？入力フィールドにnoteIDと呼ばれる追加の属性を指定し、フォーカス時に.attr（）関数を使用してIDを取得します。これで、DOMを探し回ることなく選択できます。

$('.hasNote').focus(function() {
    var noteID = $(this).attr("noteID");
    $('#' + noteID).fadeIn(400);
};

<input type="text" class="hasNote" id="whatever" noteID="same as the note id" />
<note id="noteID">

明らかに、ここではIDを使用しているだけ<noteなので、必要な要素に変更してください。

于 2013-03-14T17:28:20.900 に答える