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

原因是您的发送功能是异步的，

如果您使用async = false

，请设置ajax

可替换地，您可以使用视图模型属性来保存boolean值并使用hasfocus绑定

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

然后在提交功能中

set vm.focus(true);

OR

始终将消息框的hasfocus设置为true。

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

如何自动对焦场？

4 个答案: