Jak ponownie skoncentrować się na polu tekstowym, gdy utracisz ostrość w formularzu HTML?

Question

W formularzu HTML jest tylko jedno pole tekstowe. Użytkownicy wprowadzają tekst, naciskają klawisz Enter, przesyłają formularz, a formularz jest ponownie ładowany. Głównym zastosowaniem jest odczyt kodów kreskowych. Używam następujący kod, aby ustawić ostrość do pola tekstowego:

<script language="javascript"> 
    <!-- 
      document.getElementById("#{id}").focus() 
    //--> 
</script> 

To działa przez większość czasu (jeśli nikt nie dotyka ekranu/mysz/klawiatura).

Jednak gdy użytkownik kliknie gdzieś poza polem w oknie przeglądarki (białe puste miejsce), kursor zniknie. Jeden pojedynczy formularz HTML pola, w jaki sposób mogę zapobiec utracie kursora? Lub, jak ponownie ustawić kursor w polu po utracie kursora? dzięki!

Answer 1

odpowiedź Darin jest w porządku, ale nie działa w Firefoksie. Jeśli chcesz ukraść ostrości z powrotem w Firefoksie też trzeba opóźnić aż po zdarzeniu:

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);"> 

Albo lepiej, przydzielony z JavaScript:

<script type="text/javascript"> 
    var element= document.getElementById('foo'); 
    element.focus(); 
    element.onblur= function() { 
     setTimeout(function() { 
      element.focus(); 
     }, 0); 
    }; 
</script> 

ale Zdecydowanie polecam nie należy tego robić. Kliknięcie poza polem tekstowym w celu usunięcia fokusu z tego pola tekstowego jest całkowicie normalnym zachowaniem przeglądarki, które może być legalnym użyciem (np. Ustawić punkt wyszukiwania dla Ctrl-F lub rozpocząć zaznaczanie przez przeciągnięcie, itp.). Jest mało prawdopodobne, aby był dobry powód, by zepsuć to oczekiwane zachowanie.

Answer 2

Możesz zawiesić zdarzenie blur i ponownie ustawić pole ponownie. Jest bardzo mało przypadków użycia tego, ale wygląda na to, że twój może być jednym z nich. Zauważ, że prawdopodobnie będziesz musiał zaplanować ponowne skupienie za pomocą setTimeout lub podobnego, nie będziesz w stanie tego zrobić wewnątrz samej obsługi blur.

Kiedy robi to bez wpływu na znaczników, to najprostszym przypadku korzystania z biblioteki jak Prototype, jQuery, Closure itp, ale można to zrobić bez nich (oczywiście), po prostu trzeba obsłużyć różnice siebie przeglądarki . Na przykład, za pomocą Prototype:

document.observe("dom:loaded", function() { 
    var elm = $('thingy'); 

    elm.focus(); 
    elm.observe('blur', function() { 
     refocus.defer(elm); 
    }); 

    function refocus(elm) { 
     elm.focus(); 
    } 
}); 

Jeśli nie przeszkadza wpływając na znaczników, można użyć atrybutu onblur. Na przykład, to działa na IE, Firefox i Chrome przynajmniej (prawdopodobnie innymi):

HTML:

<input type='text' id='thingy' onblur="refocus(this);"> 

Scenariusz:

function refocus(elm) { 

    setTimeout(go, 0); 

    function go() { 
     elm.focus(); 
    } 
} 

Answer 3

<input type="text" name="barcode" onblur="this.focus();" />