单击时,HTML输入字段不会获得焦点

Question

我有一个问题,我无法弄清楚究竟是什么导致这种行为.我无法textarea在HTML表单上访问输入字段和s.

不幸的是,JS,HTML和CSS非常大,所以我不能在这里发布所有内容.

调试这个奇怪的行为时,有人能告诉我要找什么吗？

UPDATE

如果我将光标移动到该input字段上,我可以看到文本光标,但是当我单击它时,该字段不会获得焦点.我可以通过按键访问该字段Tab,如果我右键单击它然后单击该字段我也得到它的焦点.

......和不,他们没有disabled或readonly属性;-)

Answer 1

当我点击它时,该字段没有得到焦点.我可以通过按"tab-key"访问该字段

听起来你已经取消了mousedown事件的默认操作.在您的HTML和JS中搜索onmousedown处理程序并查找读取的行.

return false;

此行可能会阻止您通过单击进行聚焦.

Re:您的评论,我假设您无法编辑添加此处理程序的代码？如果可以,最简单的解决方案就是删除该return false;语句.

有没有办法只是通过不覆盖事件触发器来添加功能？

这取决于处理程序的附加方式.如果使用传统的注册方法附加它,例如element.onmousedown,那么你可以为它创建一个包装器:

var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
    oldFunc.call(this, evt || window.event);
}

由于此"包装器"不返回false,因此不会取消元素的默认操作(聚焦).如果使用高级注册方法(例如addEventListener或attachEvent)附加事件,则只能使用函数名称/引用删除事件处理程序,并使用与上面类似的包装函数重新附加事件处理程序.如果它是一个添加的匿名函数,你无法获得它的引用,那么唯一的解决方案是附加另一个事件处理程序并使用element.focus()方法手动聚焦元素.

Answer 2

我也有这个问题.我disableSelection()在包含输入字段的父DIV上使用了jQuery UI 的方法.在Chrome中,输入字段不受影响,但在Firefox中,输入(以及textareas)并没有集中在点击上.这里奇怪的是,这些输入上的点击事件有效.

解决方案是删除disableSelection()父DIV 的方法.

Answer 3

我知道这是一个非常古老的线索,但这最近发生在我身上; 我花了一段时间才弄明白.

将'input'元素放在一对'label'标签内可能导致同样的问题.

在我的情况下,我打算创建一对'div'标签,但我意外地创建了一对'label'标签,然后使用DOM插入了一些文本输入字段'input type ="text"..'.

它通常显示在屏幕上,但是当我点击任何文本字段时,光标不断跳回到第一个"输入"并且确实表现不稳定.

我花了一些时间来弄清楚这一点,因为这种行为是微妙的,而且根本不是我犯这种错误所期望的.

bsnider

Answer 4

使用onclick="this.select()"输入标记的属性.

Answer 5

我不久前一直在努力解决同样的问题.我在模态jquery-ui对话框中使用了jquery.layout插件,我无法访问其中的任何字段.

它似乎是一个z-index问题(有些div是在我的输入字段,所以我无法点击它们).您应该检查它并尝试更改z-index输入字段的值.

Answer 6

当<label>表单中存在不平衡标签时,有时会发生这种情况.

Answer 7

我也有这个问题,在我的情况下,我发现字体的颜色与背景的颜色相同,所以看起来什么也没发生.

Answer 8

我已经阅读了上面的所有答案，有些答案引导我找到问题所在，但没有找到问题的解决方案。

问题的根本原因是disableSelection()。它导致了所有问题，但删除它并不是一个解决方案，因为（至少在 2016 年或稍早之前），在触摸屏设备上，如果您希望能够使用 jQuery 移动对象，您“必须”使用它。

解决方案是将 留给disableSelection()可排序元素，但也在上面添加一个绑定操作：

 $('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
    event.stopImmediatePropagation();
 })

jQuery 元素中的form仅仅是为了停止在表单上传播，因为您可能需要在某些元素上传播。

Answer 9

如果您没有将列放在<div class ='row'>. 列浮动不会被清除，您可以将下一列覆盖在前一列上，因此点击不会击中您期望的 dom 元素。