2

2 つの div を含む単一の HTML ページを作成しました。左側の div (ページの 90%) は、ajax 結果のターゲットです。右側の div (ページの 10%) には、1 つのテキスト ボックスが含まれています。

このページのアイデアは、(バーコード スキャナーを介して) テキスト ボックスに部品番号を入力し、その部品番号に一致する図面を表示して、左側の div に表示することです。

私はそのすべてを機能させています。問題ありません。

私が理解できないのは、描画が読み込まれた後にフォーカスをテキストボックスに戻す方法です。

次のように、図面がオブジェクトとして読み込まれます。

<div id="viz">
      <object classid="clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF" width="640" height="480">
         <param name="src" value="name_of_file.dwf" />
         <param name="wmode" value="transparent" />
         <param name="UserInterfaceEnabled" value="false" />
         <param name="NavigatorDocked" value="true" />
         <param name="ToolbarVisible" value="false" />
         <embed width="100%" height="100%" wmode="transparent" src="<?php echo $drawingfullpath;?>" ></embed>
      </object>
</div>

(スコアを保持している人にとって、そのオブジェクトは Autodesk DWF ビューアです。Flash とよく似た動作をしますが、同じパラメータをすべて受け入れるわけではありません)。

テキスト ボックスに常にフォーカスを維持するための最良の方法は何ですか? オペレーターはバーコード スキャナーを使用するため、フォーカスが失われた場合にマウスでテキスト ボックスに戻る必要はありません。

このような単純な要求には過剰に思えるので、jquery を使用しないことをお勧めします。ただし、jquery がこれを達成する唯一の方法である場合は、それで問題ありません。

アップデート

fiddle ( http://jsfiddle.net/g9YxB/7/ ) は、@subin からの最新の提案で更新されました。

オブジェクトが読み込まれると、フォーカスは失われます。ただし、ページから離れた場所をクリックしてから戻ると、そのページが属する場所 (テキスト ボックス内) にフォーカスが置かれます。それが手がかりになるはずですよね？

4

2 に答える 2

5

jQuery を使用すると、次のようになります。

$(function() {
     // Focus on load
     $('.scanner').focus();
     // Force focus
     $('.scanner').focusout(function(){
         $('.scanner').focus();
     });
     // Ajax Stuff
     $('.scanner').change(function() {
         $.ajax({
             async: true,
             cache: false,
             type: 'post',
             url: '/echo/html/',
             data: {
                 html: '<p>This is your object successfully loaded here.</p>'
             },
             dataType: 'html',
             beforeSend: function() {
                 window.alert('Scanning code');
             },
             success: function(data) {
                 window.alert('Success');
                 $('.objectWrapper').append(data);
             },
             // Focus
             complete: function() {
                 $('.scanner').val('').focus();
             }
        });
    });
});

jsFiddle の例: http://jsfiddle.net/laelitenetwork/fuMYX/5/

PS: jQuery が嫌いな人は嫌いです ;)。

于 2013-10-21T14:46:07.917 に答える
4

setInterval を使用します。

setInterval(function(){
 var focusbox;
 focusbox = document.getElementById("part_to_search");
 focusbox.focus();
});

Jsfiddle http://jsfiddle.net/g9YxB/10/

于 2013-10-21T13:29:39.737 に答える