एक फ़ील्ड को ऑटो फोकस कैसे करें?

Question

मैं नॉकआउटजेएस और नोड.जेएस के साथ एक छोटा चैट क्लाइंट/सर्वर ऐप लिख रहा हूं, तथ्य यह है कि, जब मैं एक संदेश भेजता हूं, तो संदेश संदेश पर ध्यान केंद्रित करता हूं, और उपयोगकर्ताओं को इसे फिर से क्लिक करना पड़ता है हर बार वे टाइप करना चाहते हैं (बहुत परेशान)। क्या आप जानते हैं कि मैं क्या कर सकता हूं? यहाँ टेम्पलेट है:

<script type="text/html" id="chatRoom"> 
<div id="chatContainer" class="chatContainer"> 
    <div class="chatFrom"> 
     <i id="chatClose" class="chatSprite chatClose" data-bind='click: function() { server.removeChat(this) }'></i> 
    </div> 
    <div class="chatMessages"> 
     <ul id="chatHolder"> 
     {{each messages()}} 
      <li><div class="chatFromText">From: ${ from }</div> 
      <div class="chatTime">${ time }</div><div class="chatMsg">${ text }</div></li> 
     {{/each}} 
     </ul> 
    </div> 
    <div class="chatControls"> 
    <form data-bind="submit: function() { send($('#'+channel).val()); $('#'+channel).focus(); }"> 
     <input type="text" id="${ channel }" name="message" class="chatText" style="color: #999;" value="Message Here" data-bind='click: function() { 
      $("#"+channel).val("").css("color", "#000"); 
     }' /> 
     <i class="chatSprite chatSend" data-bind="click: function() { $('.chatSend').parent().submit() }"></i> 
    </form> 
    </div> 
</div> 
</script> 

आप देख सकते हैं मैं क्षेत्र ध्यान केंद्रित करने के हर संभव तरीके से कोशिश की है, लेकिन कोई भी काम करने के लिए लग रहे हैं। कोई सुझाव?

Answer 1

मुझे लगता है कि आपकी समस्या यह है कि आपकी "प्रेषण" विधि सर्वर पर एक एसिंक्रोनस पोस्ट वापस करती है, सफलता कॉलबैक में यह शायद आपके संदेशों को संदेश को अवलोकन करने के लिए धक्का देती है। जब ऐसा होता है तो आपका टेम्पलेट पुनः प्रस्तुत किया जाता है और आपका ध्यान खो जाता है। तो, यह आपके $('#'+channel).focus() कॉल के बाद होता है, क्योंकि प्रेषण अतुल्यकालिक रूप से पूरा करता है।

आपके प्रेषण समारोह को देखे बिना सुनिश्चित नहीं हो सकता है।

एक विकल्प "चैनल" को आपके "प्रेषण" फ़ंक्शन में एक और पैरामीटर के रूप में पारित करना होगा, फिर आपके संदेशों को संदेश को धक्का देने के बाद आपके AJAX अनुरोध के लिए सफलता कॉलबैक में अरायरे चैनल पर आधारित फ़ोकस सेट करें।

यहाँ नमूना: http://jsfiddle.net/rniemeyer/h2A6p/

Answer 2

नॉकआउट अब एक hasfocus बाध्यकारी है।

Answer 3

कारण यह है कि आपके भेजने समारोह अतुल्यकालिक किया जा रहा है,

या तो, async = false सेट अगर आप ajax

वैकल्पिक रूप से, उपयोग कर रहे हैं यदि आप एक boolean मूल्य धारण करने के लिए एक दृश्य के मॉडल संपत्ति का उपयोग करें और hasfocus उपयोग कर सकते हैं बाध्यकारी

function chatVM() 
{ 
    this.focus = ko.observable(true); 
} 
var vm = new chatVM(); 

और फिर अपने अंदर प्रस्तुत समारोह

set vm.focus(true); 

या

हमेशा सच करने के लिए अपने संदेश बॉक्स के hasfocus निर्धारित किया है।

div class="msgbox" data-bind="hasfocus: ko.observable(true)"></div> 

Answer 4

अरान की और अरुण के जवाब का मेल, सबसे आसान तरीका है कि मेरे लिए काम करता है:

<input id="channel" type="text" data-bind="hasfocus: true" />