从ListView的ItemInvoked事件编程设置输入框的焦点 [Windows 8 Metro HTML5]

18

编辑: 如果你没有在Windows 8上进行开发,请勿尝试回答此问题。不要投票,也不要阅读。这不是一个Web应用程序或网站,也不在浏览器中运行。请停止对你不理解的内容进行负面评价。这是一个在Windows Runtime环境中运行的Windows 8 METRO HTML5/js应用程序。

原始问题:

我想让输入框中的光标“闪烁”,准备接收输入。我正在使用javascript来设置焦点。但这并不起作用:

document.querySelector("#input-box").focus();

有人知道为什么吗?难道使用焦点方法不是正确的方式吗?

谢谢。

编辑 #2: 所以这肯定与我试图从 ListView 的 "itemInvoked" 事件中设置输入的焦点有关。该事件正常触发,元素可以从事件处理程序中访问,并且该行在执行时没有错误。我可以从标准按钮单击事件设置焦点到我的输入标记,但无法从 ItemInvoked 事件设置焦点。所以问题是,为什么我不能从此事件处理程序内设置焦点?


1
我猜“Windows 8”不是我们需要的正确信息。您使用的浏览器是什么?此外,请考虑“autofocus”属性。 - MaxArt
1
“Windows 8”是指IE 8吗? - honyovk
4
我的意思是Windows 8操作系统。请在Google上搜索。 - JT703
如果您提供一些标记,这对我们有益吗?- 只是为了再次确认。 - Greg
2
@JT703,由于WinRT JS核心基于IE9的Chakra,您能否测试以下内容?#1:尝试两次调用document.querySelector("#input-box").focus();。#2:如果#1失败,请尝试调用document.querySelector("#input-box").select();document.querySelector("#input-box").focus();。#3:如果#2失败,请将焦点放在超时内setTimeout(function(){ document.querySelector("#input-box").focus(); }, 100);。我知道这是WinRT,但我只是涵盖了一些在IE9上发生的focus()错误。测试不会有任何损失,对吧? - RaphaelDDL
显示剩余3条评论
5个回答

10

我创建了一个小测试项目,只有一个文本框,并在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();
        }

你能否更新你的示例,使用被调用为焦点事件触发器的listview项目?我认为这是核心问题。 - JT703
我认为,如果您提供一个带有问题的工作示例应用程序,而不是根据您的输入更新我们的示例,那会更好。如果您发送一个样本,我真的很想研究一下您的问题。 - ChristiaanV
对不起,我做不到。这绝对是一个列表视图问题。如果有人能够找出来,那就是解决方案。 - JT703
你不能将问题抽象为一个单独的解决方案并交给我们吗?如果你做不到这一点,我该如何替你完成呢? - ChristiaanV
点击列表视图项 -> 使其聚焦到文本输入框 - JT703
已更新我的回答,希望这能解决你的问题。 - ChristiaanV

1
你用的是哪个版本?消费者预览版还是其他开发者预览版?我用的是DP6(仅限微软合作伙伴),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();            
});

我能想到的唯一原因是该元素在准备好之前被访问了,或者是早期版本的错误。如果您想查看解决方案,请点击此链接:http://www.mediafire.com/?ghz49gtfxlgr7en

所以,这个例子几乎与我所尝试的[在单击事件中设置焦点]完全相同。 我复制/粘贴了您的元素/事件处理程序到我的项目中,并且它们运行良好。 这正是我所做的,但我的情况仍然不起作用。 我能想到的唯一区别是我的单击来自列表视图项。 事件正确触发,输入元素确实存在,并且该行正在执行,但没有任何反应。 此外,输入标记位于表单标记内。 我不知道这是否重要。 - JT703
这肯定与 ListView 有关,以及事件是“itemInvoked”事件的事实有关。我已确认表单与此无关。我可以从标准按钮单击事件设置焦点到我的输入标记,但不能从此 ItemInvoked 事件中设置焦点。所以问题是,为什么我不能从此事件处理程序内设置焦点? - JT703
1
如果你能提供更多关于流程的信息会很好(哪个被点击了,哪个元素在哪里被修改等)。然而从你所说的,我会这样做:-确保输入元素实际上被选择,通过使它的style.visibility='collapse'来看是否进行DOM操作-如果是,则可能是焦点竞争条件问题。列表视图在幕后执行许多操作,包括将焦点设置为项目(例如:如果您单击项目,则该项目现在具有焦点)。为测试是否存在此问题,请使用setTimeOut延迟输入设置焦点。 - Orry S
setTimeout没有起到作用。你能否更新你的示例,使用被调用的listview项目而不是按钮?我认为这是核心问题。 - JT703
我设置了一个简单的列表视图示例:http://www.mediafire.com/download.php?3k7prujw8od62odsetTimeout实际上是有效的,在这种情况下需要。所以当你点击一个列表视图时,你正在将焦点设置到该项上。因此你不能关注其他任何事情。我尝试了1毫秒的延迟,它可以工作,但为了安全起见,我把它设为10毫秒。 - Orry S

0

虽然这个问题很老,但我仍在苦苦寻找解决方案。

首先,.focus() 不返回任何值,它只是设置焦点并返回 undefined。

此外,当我们将焦点设置在某个元素上时,请确保该元素具有 tabindex 属性,否则它将无法聚焦(主要在 Chrome 中)。

可以使用以下查询:

element.querySelector('#label').setAttribute('tabindex','0');
element.querySelector('#label').focus();

0

尝试这个看看是否有帮助:

if(document.createEvent) 
{
    document.getElementById('input-box').dispatchEvent('DOMFocusIn');
} 
else 
{
    document.getElementById('input-box').fireEvent('DOMFocusIn', event);
}

它进入了第一个块并抛出一个错误,说“DOMFocusIn”是一个“无效的参数”。 - JT703
尝试将 DOMFocusIn 替换为 onfocus - BenM
同样的事情。这个WinRT平台与标准的Web开发非常不同,真是令人沮丧。 - JT703

0

尝试使用非jQuery的常规JavaScript,例如

document.getElementById('myElementsID').focus()


我没有使用jQuery。请注意,这是一个Win8 Metro应用程序。当我尝试了你的建议后,什么也没有改变。 - JT703
您确定元素的ID存在吗?另外,您确定在调用此JavaScript时元素确实存在吗? - Steve Binder
是的。我很肯定。我已经通过调试,该元素绝对存在。 - JT703
我敢打赌Steve认为querySelector()是jQuery的语法。可悲啊。请去学习吧。 - RaphaelDDL

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接