如何自動對焦一個字段？

我正在用KnockoutJS和Node.js編寫一個小型的聊天客戶端/服務器應用程序，除了事實上，我發送消息後，我不再關注消息字段，用戶必須重新點擊它每次他們想打字（很煩人）。你們知道我能做什麼嗎？這裏是模板：如何自動對焦一個字段？

<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>

正如你可以看到我已經試過重點領域的每一個可能的方式，但沒有一個似乎工作。有什麼建議麼？

來源

2011-03-08 Jose

我認爲你的問題很可能是你的「發送」方法做一個異步回發到服務器，在成功回調它可能會推送消息到你的消息observableArray。發生這種情況時，您的模板會重新渲染，您的焦點將丟失。所以，這發生在您撥打$('#'+channel).focus()之後，因爲發送是異步完成的。

無法確定沒有看到您的發送功能。

一個選項是將「channel」作爲另一個參數傳遞給「send」函數，然後在將消息推送到消息後成功回調AJAX請求observableArray根據通道設置焦點。

樣品在這裏：http://jsfiddle.net/rniemeyer/h2A6p/

來源

2011-03-08 21:12:44

RP，你我的朋友是個高手！你對異步調用和模板重新渲染之間的時間是正確的，所以我只是把它放在正確的地方，它的工作！再次感謝你 – Jose 2011-03-08 21:28:01

嘿RP，我認爲到knockout-latest-debug.js文件的鏈接被破壞了。所以jsfiddle的例子也被打破了。我以前見過同樣的問題。只是想讓你知道。 – 2013-02-22 15:52:42

謝謝。許多舊的小提琴都與Github上的構建輸出相關聯，而這些輸出已不再適用於KO。我更新了小提琴。如果你看到其他人，請告訴我。 – 2013-02-22 16:45:03

淘汰賽現在有一個hasfocus結合。

來源

2012-02-15 04:01:57

的原因是你的發送功能是異步的，

要麼設置async = false，如果您正在使用ajax

或者，您可以使用視圖模型屬性舉行boolean值，並使用hasfocus結合

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

然後你的內部提交功能

set vm.focus(true);

設置你的消息框的hasfocus爲true始終。

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

來源

2012-12-20 04:14:34

結合阿蘭的和阿倫的回答，這對我的工作的最簡單的方法是：

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

來源

2013-01-24 10:53:43 mhu

如何自動對焦一個字段？

回答

相關問題