Как автофокусировать поле?

Я пишу небольшое клиентское/серверное приложение для чата с 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>

Как вы можете видеть, я пробовал все возможные способы фокусировки поля, но никто не работает. Любые предложения?

Ответ 1

Я думаю, что ваша проблема в том, что ваш метод отправки посылает асинхронный ответ на сервер, в обратном вызове успеха он, вероятно, подталкивает сообщение к вашим сообщениям наблюдаемым массивом. Когда это происходит, ваш шаблон повторно отображается, и ваш фокус теряется. Таким образом, это происходит после вашего вызова $('#'+channel).focus(), потому что отправка завершается асинхронно.

Невозможно убедиться, не видя вашу функцию отправки.

Один из вариантов заключается в передаче "канала" в качестве другого параметра в функцию "отправить", а затем в обратном вызове успеха для вашего запроса AJAX после нажатия сообщения на ваши сообщения наблюдаемый массив создавал фокус на основе канала.

Пример здесь: http://jsfiddle.net/rniemeyer/h2A6p/

Ответ 2

У нокаута теперь есть привязка hasfocus.

Ответ 3

Объединив ответы Арана и Аруна, самый простой способ, который работает для меня, это:

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