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

HTML input fields does not get focus when clicked

提问by helle

I have a problem and I can't figure out what exactly is causing this behavior. I cannot access my input fields and textareas on my HTML form.

我有一个问题，我无法弄清楚究竟是什么导致了这种行为。我无法访问textareaHTML 表单上的输入字段和s。

Unfortunately, the JS, HTML and CSS are very large, so I can't really post it all here.

不幸的是，JS、HTML 和 CSS 非常大，所以我不能真正在这里发布。

Can anybody tell me what to look for when debugging this strange behavior?

谁能告诉我在调试这种奇怪的行为时要寻找什么？

UPDATE

更新

If I move the cursor over the inputfield I can see the text cursor, but when I click it the field does not get the focus. I can access the field via pressing the Tabkey and if I right click on it and then click on the field I also get the focus for it.

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

...and nope, they don't have the disabledor readonlyattributes ;-)

...不，他们没有disabledorreadonly属性;-)

采纳答案by Andy E

when i click it the field does not get the focus. i can access the field via pressing the "tab-key"

当我单击它时，该字段没有获得焦点。我可以通过按“tab键”访问该字段

It sounds like you've cancelled the default action for the mousedownevent. Search through your HTML and JS for onmousedownhandlers and look for a line that reads.

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

return false;

This line may be stopping you from focusing by clicking.

这条线可能会阻止您通过单击来集中注意力。

---

---

Re: your comment, I'm assuming you can't edit the code that adds this handler? If you can, the simplest solution is to just remove the return false;statement.

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

is there a way to just add functionality to the event-trigger by not overwriting it?

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

That depends on how the handler is attached. If it's attached using the traditional registration method, e.g. element.onmousedown, then you could create a wrapper for it:

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

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

Since this "wrapper" doesn't return false, it will not cancel the default action (focusing) for the element. If your event is attached using an advanced registration method, such as addEventListeneror attachEventthen you could only remove the event handler using the function name/reference and reattach it with a wrapped function similar to the above. If it's an anonymous function that's added and you can't get a reference to it, then the only solution would be to attach another event handler and focus the element manually using the element.focus()method.

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

回答by Armin

I had this problem too. I used the disableSelection()method of jQuery UI on a parent DIV which contained my input fields. In Chrome the input fields were not affected but in Firefox the inputs (and textareas as well) did not get focused on clicking. The strange thing here was, that the click event on these inputs worked.

我也有这个问题。我disableSelection()在包含我的输入字段的父 DIV 上使用了jQuery UI的方法。在 Chrome 中，输入字段不受影响，但在 Firefox 中，输入（以及文本区域）没有专注于点击。奇怪的是，这些输入上的点击事件有效。

The solution was to remove the disableSelection()method for the parent DIV.

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

回答by bill snider

I know this is a very old thread, but this just happened to me recently; took me a while to figure it out.

我知道这是一个非常古老的线程，但这只是最近发生在我身上；我花了一段时间才弄明白。

This same issue can be caused by putting 'input' elements inside of pair of 'label' tags.

将“输入”元素放在一对“标签”标签内可能会导致同样的问题。

In my case, I had intended to create a pair of 'div' tags but instead I accidently created a pair of 'label' tags, then inserted some text input fields 'input type="text"..' using DOM.

就我而言，我本来打算创建一对“div”标签，但我不小心创建了一对“标签”标签，然后使用 DOM 插入了一些文本输入字段“input type="text"..”。

It displayed normally on the screen, but when I clicked on any of the text fields, the cursor kept jumping back to the first 'input' and really acting erratic.

它在屏幕上正常显示，但是当我单击任何文本字段时，光标一直跳回到第一个“输入”并且表现得很不稳定。

Took me a while to figure this out because this behavior is subtle, and not at all what I would have expected from making this kind of mistake.

我花了一段时间才弄清楚这一点，因为这种行为很微妙，而且完全不是我所期望的犯这种错误。

bsnider

斯奈德

回答by Ashwin G

Use the onclick="this.select()"attribute for the input tag.

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

回答by Bertrand Marron

I've been struggling with the same problem a while ago. I was using the jquery.layout plugin in a modal jquery-ui dialog and I couldn't access any of the fields in it.

不久前我一直在为同样的问题苦苦挣扎。我在模态 jquery-ui 对话框中使用 jquery.layout 插件，但无法访问其中的任何字段。

It appeared to be a z-indexproblem (some divwas over my input fields, so I couldn't click them). You should check it out and try changing the z-indexvalue of your input fields.

这似乎是一个z-index问题（有些div超出了我的输入字段，所以我无法点击它们）。您应该检查一下并尝试更改z-index输入字段的值。

回答by DoubleL

This happens sometimes when there are unbalanced <label>tags in the form.

当<label>表单中有不平衡的标签时，有时会发生这种情况。

回答by James Westgate

This can occur in bootstrap if you do not place your columns inside a <div class ='row'>. The column floats are not cleared and you could get the next column overlying the previous, hence clicks wont hit the dom elements where you expect.

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

回答by Gerson

I had this problem too, and in my case I found that the color of the font was the same color of the background, so it looked like nothing happened.

我也有这个问题，就我而言，我发现字体的颜色与背景的颜色相同，所以看起来什么也没发生。

回答by Aleks

I have read all the answers above, and some directed me to the problem, but not to the solution for the problem.

我已经阅读了上面的所有答案，有些是针对问题的，但不是针对问题的解决方案。

The root cause of the problem is disableSelection(). It is causing all the problems, but removing it is not a solution, as (at least in 2016 or slightly before), on touch-screen devices, you "have" to use this if you want to be able to move objects with jQuery.

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

The solution was to leave the disableSelection()to the sortable element, but also add a binding action just above:

解决方案是将 留给disableSelection()sortable 元素，但还要在上面添加一个绑定操作：

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

The formin the jQuery element is just to stop propagation on the form, as you might need propagation on some elements.

将form在jQuery的元素只是停止形式传播，因为你可能需要对一些元素的传播。

回答by aka

If you are faced this problem while using canvas with DOM on mobile devices, the answer of Ashwin Gworked for me perfectly, but I did it through javascript

如果您在移动设备上使用带有 DOM 的画布时遇到这个问题，答案Ashwin G对我来说非常有用，但我是通过 javascript 做到的

var element = document.getElementById("myinputfield");
element.onclick = element.select();

After, everything worked flawlessly.

之后，一切都完美无缺。