如何自動對焦場？

Question

我正在使用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>

正如你所看到的，我已經嘗試了一切可能的方法來聚焦這個領域，但似乎都沒有效果。 有什么建議？

Answer 1

我認為您的問題可能是您的“發送”方法將異步回發送回服務器，在成功回調中它可能會將消息推送到您的消息observableArray。 發生這種情況時，您的模板將重新渲染，您的焦點將丟失。 因此，這發生在$('#'+channel).focus()調用之后，因為發送是異步完成的。

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

一種選擇是將“channel”作為另一個參數傳遞給“send”函數，然后在將消息推送到消息后成功回調AJAX請求observableArray根據通道設置焦點。

此處示例： http ： //jsfiddle.net/rniemeyer/h2A6p/

Answer 2

Knockout現在有一個hasfocus綁定。

Answer 3

結合Aran和Arun的答案，對我有用的最簡單方法是：

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

Answer 4

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

如果您使用的是ajax ，請設置async = false

或者，您可以使用視圖模型屬性來保存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>