Bir HTML formunda odak kaybolduğunda bir metin alanına nasıl odaklanılır?

Question

Bir HTML formunda yalnızca bir metin alanı var. Kullanıcılar bazı metinleri girer, Enter'a basar, formu gönderir ve form yeniden yüklenir. Ana kullanım barkod okumasıdır. Ben metin alanına odağı ayarlamak için aşağıdaki kodu kullanın:

Bu çoğu zaman işleri

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

(kimse ekran/fare/klavye dokunursa). Ancak, kullanıcı tarayıcı penceresinin (beyaz boş alan) içindeki alanın dışını tıklattığında, imleç gitmiş olur. Tek bir alan HTML formu, imlecin kaybolmasını nasıl engelleyebilirim? Veya imleç kaybolduğunda imleci alanın içine nasıl yeniden odaklayalım? Teşekkürler!

Answer 1

Darin cevabı haklı, ama Firefox'ta çalışmıyor. Eğer çok geri Firefox'ta odağı çalmak istiyorsanız, olaydan sonra kadar ertelemek zorunda:

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

Veya daha iyi, JavaScript atanan:

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

Ama şiddetle tavsiye ediyorum Bunu yapmayın. Bu metin kutusundan odağı kaldırmak için bir metin kutusunun dışına tıklamak, yasal kullanımdan (örn. Ctrl-F için arama noktasını ayarlamak veya bir sürükle-seçimi başlatmak vb.) Olabilecek tamamen normal tarayıcı davranışıdır. Beklenen bu davranışla uğraşmak için iyi bir neden olması pek olası değildir.

Answer 2

blur olayını bağlayıp alanı tekrar yeniden odaklayabilirsiniz. Bunu yapmak için çok az kullanım örneği vardır, ancak sizinkilerden biri sizinki gibi olabilir. Muhtemelen, setTimeout veya benzeri aracılığıyla yeniden odaklamayı planlamanız gerektiğini unutmayın, blur işleyicisinin kendisinde yapamayacaksınız. vb Prototype, jQuery, Closure gibi bir kütüphane kullanırsanız

işaretlemeyi etkilemeden bunu

, bu en kolay, ancak bunlardan (elbette) olmadan bunu yapabilir, sadece tarayıcı farklılıklarını kendini idare zorunda . Örneğin, prototip kullanarak: Eğer işaretlemeyi etkileyen sakıncası yoksa

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

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

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

, sen onblur özelliğini kullanabilirsiniz. Örneğin, bu (muhtemelen diğerleri) en az IE, Firefox ve Chrome üzerinde çalışır:

HTML:

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

Senaryo:

function refocus(elm) { 

    setTimeout(go, 0); 

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

Answer 3

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