检查焦点是否在文本字段上答案

【问题标题】：Check if focus is on a textfield检查焦点是否在文本字段上
【发布时间】：2012-09-29 12:06:43
【问题描述】：

我正在使用箭头让人们在我的网站上四处走动。当您尝试在表单字段中写入时，我不希望此功能存在。如何检查我的某个文本字段是否获得焦点？

【问题讨论】：

这不是一个好主意。默认行为是使用 tab 键导航，然后使用光标键在控件内导航。如果你改变这种行为，你只会让用户的生活变得更加困难。使用 javascript 重写 UI 是个坏主意。
如果您想查看使用 blur 和 focus 事件来跟踪哪个元素具有焦点的问题，请尝试使用 quirksmode 的blur and focus compatability table。
重复stackoverflow.com/questions/4575266/…

标签： javascript

【解决方案1】：

我认为如果焦点在文本框中，默认情况下 Web 浏览器会禁用使用箭头键在页面上移动。不需要额外的代码。

【讨论】：

没错！在下面的答案文本区域框中尝试：将光标设置在其中，然后尝试使用箭头键再次将其移出。它不起作用！
@powtac 箭头键的默认功能不起作用（移动页面），但 OP 正在实现自定义功能，即使文本区域被聚焦，该功能仍将执行。
@powtac 原始海报。提出问题的人。
@powtac - OP 是原始帖子（呃）。但我同意你的观点，从简短的描述来看，默认浏览器功能会这样做——至少在 IE 和其他一些浏览器中，注意到 Opera 有自己古怪的键盘方案。
所以“OP”又名@Jocke 应该提出这个问题并发布一些代码。 ;) ...我也猜到了...

【解决方案2】：

我已经使用document.activeElement.tagName 来获取具有焦点的元素的tagName，它将返回为'TEXTAREA'、'INPUT'等。

据我所知和测试，它适用于所有现代浏览器。

【讨论】：

【解决方案3】：

要判断您的某个文本字段是否获得焦点，请将 onfocus 和 onblur 处理程序添加到您要监视的文本字段并处理 onfocus 处理程序中的状态更改。例如，

<script>
var textFieldInFocus;
function handleOnFocus(form_element)
{
   textFieldInFocus = form_element;
}
function handleOnBlur()
{
   textFieldInFocus = null;
}
</script>
<form>
  <input type="text" name="text1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"/>
  <input type="text" name="text2"/>
  <textarea name="textarea1" onfocus="handleOnFocus(this)" onblur="handleOnBlur()"></textarea>
</form>

鉴于上述代码，您可以让其他 JS 代码检查 textFieldInFocus 以查看它是否已定义（文本字段当前已获得焦点）并且值将是焦点中的文本字段表单元素。例如，

if(textFieldInFocus)
{
    alert("The textField that was currently focused is " + textFieldInFocus);
}

添加 onfocus 和 onblur 处理程序的更短、更简单的方法是使用 jQuery，但由于没有提及，我编写了一个小而简单的实现。

另外，在更改键盘和鼠标事件的默认行为时要小心，因为您可能会妨碍无障碍设备，这些设备依赖于您自己可能无法测试的行为。

【讨论】：

谢谢！正如你所提到的，我设置了一个 jquery 替代品。

【解决方案4】：

在文档/正文级别捕获您正在使用的任何键盘事件，然后使用事件的目标属性来确定该事件是否应用于文本区域或输入（或您要排除的任何其他控件）和只在适当的时候做你的网站导航。

自从我尝试编写关心事件属性的事件处理代码而不使用 JQuery 来完成所有跨浏览器兼容性以来已经有一段时间了，所以以下内容可能有点错误，但应该足以让您继续解决问题其余的自己。谷歌是你的朋友。（但我强烈建议使用库（JQuery 或其他）来规范各种浏览器的事件处理。）无论如何，从内存中 IE 的事件属性使用 srcElement 而其他使用 target(? ) 为您提供对事件应用到的元素的引用。所以，话虽如此，我建议这样：

<body onkeyup="return someHandler();">

<script>

function someHandler(e) {
  if (!e)
    e = window.event;
  var elTarget = e.target ? e.target : e.srcElement;
  var elType = elTarget.tagName;
  if (elType != "textarea"
     && elType != "input"
     // && elType != "etc") {

     // do something

  }
}

</script>

【讨论】：