聚焦于使用jQuery处理Bootstrap文本域

Question

我在使用jquery和bootstrap的网页上无法集中精力于textarea上，这应该是一个微不足道的工作，但我不明白为什么它不能按照预期的方式工作。

$('#textarea').focus();

默认情况下，Bootstrap会将焦点区域呈现为蓝色光晕（参见http://twitter.github.com/bootstrap/base-css.html?#forms）。不幸的是，上面的代码似乎没有达到效果。

更具体地说，我有一个按钮，点击它会打开一个侧边窗格，里面包含一个编辑器（textarea）。我的目标是在显示窗格后自动将焦点发送到文本区域。

- Atanas Atanasov

---

问题是 .focus() 没有聚焦，还是聚焦了但缺少蓝色发光效果？发光效果简单地基于 :focus 选择器的 CSS 样式实现，所以如果成功聚焦元素，蓝色发光效果应该会随之出现... - KP.

抱歉，但我无法复现。这个按预期工作，与bootstrap一起闪耀，就像@KP所写的那样。 - hakre

你能提供在 jsFiddle 中显示侧边栏的代码吗？ - baptme

Answer 1

我刚在你提供的bootstrap页面上测试了$("#input01").focus();。它可以很好地将id为input01的输入框聚焦，使其变成蓝色。这说明对于由bootstrap样式设计的输入框进行聚焦是没有问题的。实际上，你看到的蓝色光晕只是基于bootstrap样式中的:focus选择器，只要正确选择元素，样式就应该能正常工作。

我猜测你的focus()调用可能使用了错误的jQuery选择器，或者与页面上其他操作（如侧边栏的显示）不同步。确保在选择之前#textarea元素已经存在。

如果你发布更具体的代码，我可以帮你提供更具体的答案。

- KP.

---

谢谢您的及时回复。我已经解决了自己的问题。原来是时间问题。我在fadeIn显示对话框和焦点没有等待淡出效果完成。如果我在showed事件上绑定焦点，一切都会变得顺畅。 - Atanas Atanasov

@AtanasAtanasov - 如果您自己回答了问题，应该将其作为答案发布，而不仅仅接受第一个回答者的响应作为正确答案，并添加评论。如果您发现它有用，可以适当地点赞。否则，以后来到这里的用户将不得不查看评论以找出解决方案。 - merv

@merv 我基本上同意你的观点，但是如果你注意到，我建议他调用 focus() 的时间与 DOM 操作不同步，这正是问题所在，因此将我的答案标记为解决方案并不是不合适的。仅凭这个概念就可以帮助其他人排除类似症状的故障。 - KP.