如何自动聚焦一个领域？答案

【问题标题】：How to auto focus a field?如何自动聚焦一个领域？
【发布时间】：2023-04-09 11:14:02
【问题描述】：

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

如您所见，我已经尝试了所有可能的聚焦领域的方法，但似乎都没有奏效。有什么建议吗？

【问题讨论】：

标签： javascript node.js knockout.js

【解决方案1】：

我认为您的问题很可能是您的“发送”方法将异步发送回服务器，在成功回调中它可能会将消息推送到您的消息 observableArray。发生这种情况时，您的模板会重新渲染，并且您的焦点会丢失。因此，这发生在您的 $('#'+channel).focus() 调用之后，因为发送是异步完成的。

没有看到你的发送功能就无法确定。

一种选择是将“通道”作为另一个参数传递给您的“发送”函数，然后在将消息推送到您的消息 observableArray 后，在您的 AJAX 请求的成功回调中根据通道设置焦点。

示例：http://jsfiddle.net/rniemeyer/h2A6p/

【讨论】：

RP，你我的朋友是高手！您对异步调用和模板重新渲染之间的时间安排是正确的，所以我只是把它放在正确的位置并且它起作用了！再次感谢您
嘿RP，我认为knockout-latest-debug.js 文件的链接已损坏。所以jsfiddle的例子也坏了。我以前见证过同样的问题。只是想让你知道。
谢谢。许多旧的小提琴都链接到 Github 上的构建输出，KO 不再存在。我更新了小提琴。如果你看到任何其他人，请告诉我。

【解决方案2】：

Knockout 现在有一个hasfocus 绑定。

【讨论】：

【解决方案3】：

结合 Aran 和 Arun 的答案，最适合我的方法是：

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

【讨论】：

【解决方案4】：

原因是你的发送函数是异步的，

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

【讨论】：