Программно задайте фокус поля ввода из события ListView ItemInvoked [Windows 8 Metro HTML5]
Изменить: Если вы еще не разработали Windows 8, не пытайтесь ответить на этот вопрос. Не голосуйте по этому поводу. Даже не читал. Это не веб-приложение или веб-сайт и не запускается в браузере. Пожалуйста, остановите контент для голосования, который вы не понимаете. Это приложение Windows 8 METRO HTML5/js, работающее в среде выполнения Windows.
Оригинальный вопрос:
Я хочу, чтобы курсор был "мигал" в поле ввода, готовый для приема ввода. Я использую javascript для установки фокуса. Это не работает:
document.querySelector("#input-box").focus();
Кто-нибудь знает почему? Не подходит ли метод фокуса для этого?
Спасибо.
Изменить # 2:. Это определенно имеет отношение к тому факту, что я пытаюсь настроить фокус на вход из события ListView "itemInvoked". Событие срабатывает правильно, элемент доступен из обработчика события, а строка не имеет ошибок при выполнении. Я могу настроить фокус на свой тег ввода из стандартного события нажатия кнопки, но не из события ItemInvoked. Итак, вопрос в том, почему я не могу настроить фокус из этого обработчика событий?
Ответы
Ответ 1
Я создал этот небольшой тестовый проект только с текстовым полем, а в onload задал фокус точно так же, как и вы. Я попробовал это как на эмуляторе, так и на моей локальной машине, и оба метода работают.
Не могли бы вы попробовать, работает ли этот проект на вашем компьютере? И можете ли вы дать нам более глубокое представление о том, когда вы пытаетесь установить фокус? Прямо сейчас в вашем вопросе не так много информации о том, когда это происходит.
Вы можете скачать образец здесь http://www.playingwith.net/Temp/TestFocusApplication.zip
Обновление
Хорошо, похоже, нашел это, если вы вызываете функцию msSetImmediate с функцией, которая устанавливает фокус в текстовое поле, похоже, она работает. У меня нет возможности загрузить тестовый пример, поэтому ниже вы найдете код, в котором я присоединен обработчик ItemInvoked и вызываю функцию setFocus.
var listView = document.getElementById("basicListView");
listView.winControl.addEventListener("iteminvoked", function (evt) {
if (listView.winControl.selection.count() > 0) {
msSetImmediate(setFocus);
}
});
function setFocus() {
//Set focus on input textbox;
var input = document.querySelector("#input-box")
input.focus();
}
Ответ 2
На какой сборке вы работаете? пользовательский предварительный просмотр или другие предварительные просмотры dev? Я нахожусь на DP6 (доступен для партнеров MS), и работает JS стандартная работа.
В моем default.html у меня есть:
<input id="input1" type="text" value="one"/>
<input id="input2" type="text" value="two"/>
<input id="focus_btn" type="button" value="Set focus 1"/>
<input id="focus_btn2" type="button" value="Set focus 2"/>
И затем в моем default.js, в функции шаблона, загруженной приложением, я:
document.querySelector('#focus_btn').addEventListener('click', function () {
var input1 = document.querySelector('#input1').focus();
});
document.querySelector('#focus_btn2').addEventListener('click', function () {
var input1 = document.querySelector('#input2').focus();
});
Единственная причина, по которой я могу думать, что он не работает, - это доступ к элементу, прежде чем он будет готов. Это или более ранние ошибки сборки. У меня есть решение rar'd в: http://www.mediafire.com/?ghz49gtfxlgr7en, если вы хотите видеть.
Ответ 3
Попробуйте использовать обычный javascript без jquery, например
document.getElementById( 'myElementsID' ).focus()
Ответ 4
Попробуйте это, чтобы узнать, помогает ли это:
if(document.createEvent)
{
document.getElementById('input-box').dispatchEvent('DOMFocusIn');
}
else
{
document.getElementById('input-box').fireEvent('DOMFocusIn', event);
}
Ответ 5
Хотя вопрос очень старый. Но я изо всех сил пытался найти решение для этого.
Первая вещь .focus() не возвращает никакого значения, которое только что установило фокус, и возвращается undefined.
Кроме того, когда мы фокусируем внимание на каком-то элементе, убедитесь, что элемент имеет tabindex, иначе он не будет фокусироваться (в основном, на хроме).
Можно использовать следующий запрос:
element.querySelector('#label').setAttribute('tabindex','0');
element.querySelector('#label').focus();