0

複数の入力ボックスがある jQuery を使用する Web ページがあります。入力ボックスは、click() イベントが発生したときに既存のテキスト (値プロパティ) を自動選択するように設定されています。ドキュメントのready（）イベント内から入力ボックスの1つを事前に入力しようとするまで、うまく機能していました。これを行うと、目的のフィールドで focus() メソッドを呼び出しても、そのフィールドはフォーカスを受け取りません (カーソルが入力ボックスになく、テキストが自動選択されません)。フィールドをクリックすると、テキストが自動選択されるため、フォーカスが設定されていないだけで、その部分は引き続き機能します。

ページ上の要素間の相乗効果が悪い場合に備えて、ドキュメント準備完了イベント全体の Javascript コードを含めました。getSearchArguments() 呼び出しは単に URL 引数を取り、それらを連想配列に変換することに注意してください。自動フォーカス/選択しようとしている電子メールアドレスフィールドのHTMLは次のとおりです。

<!-- E-mail Address -->
<div NAME="divEmailAddress" ID="divEmailAddress">
    <img NAME="imgEvernoteEmailAddress" ID="imgEvernoteEmailAddress" src="/images/evernote-mail-address.png" align="left" />
    <input type="text" NAME="emailAddress" ID="emailAddress" wrap="soft" style="margin-left:5px;width:600px;" title="Enter your Evernote E-mail address here" value="Enter your E-mail address" ></input>
</div>

入力ボックスに事前入力した後も focus() メソッドが機能するように、これを修正する方法を誰か教えてもらえますか?

更新: focus() 呼び出しが問題を解決した後に、select() への新しい明示的な呼び出しを追加することが判明しました。誰かがこれがなぜなのか教えてくれたら、私はそれを感謝します. 

$(document).ready
(
    function() 
    {
        // Put jQuery related initialization code that must occur after the document is ready here.

        // Have all the edit boxes except the Tags edit box auto-select the current text upon entry.

        $("#editEvernoteTags").autoSuggest
        (
            data.items, 
            {
                selectedItemProp: "name", 
                searchObjProps: "name",
                startText: "Enter Evernote tags here...",
                /* See autoSuggest.css
                open: function(event, ui) 
                {
                    $(this).autoSuggest("widget").css
                    (
                        {
                            "width": 200
                        }
                    );
                }
                */
            } // data. items
        ); // $("input[type=text]").autoSuggest

        $("#emailAddress").onblur = checkEmailAddress;

        // $("#emailAddress").css('width', $("#editEvernoteTags").css('width') * 2);

        // Synchronize the control widths to the autoSuggest "as-selections" class element.
        var tagsWidth = $("ul.as-selections").width();
        $("#emailAddress").width(tagsWidth);
        $("#editComment").width(tagsWidth);

        // If an E-mail address was provided as a URL argument, put it in the E-mail address field.
        var urlEmailAddress = getSearchArguments().emailAddress;

        // >>> COMMENTING OUT THIS IF/ELSE BLOCK ALLOWS THE FOCUS() METHOD TO WORK.
        // value="Enter your E-mail address"
        if (urlEmailAddress)
            $("#emailAddress").val(urlEmailAddress);
        else
            $("#emailAddress").val("Enter your E-mail address");

        // E-mail address
        $('#emailAddress').click(function() 
        {
            $(this).select();
        });

        // Comment
        $('#editComment').click(function() 
        {
            $(this).select();
        });

        // Set focus to the E-mail field.
        $("#emailAddress").focus();
        // >>>> This is needed to initially select the text the first time
        //  if the pre-fill code above is used.
        $("#emailAddress").select();
    } // function() 
); // $(document).ready
4

1 に答える 1

0

フォーカス ハンドラが設定されていません。クリック ハンドラを設定しました。イベントをトリガーするには、.click()and notを使用し.focus()ます。

$("#emailAddress").click();
于 2012-05-19T20:47:24.173 に答える