单击HTMLinput字段时不会获得焦点
我有一个问题，我不知道究竟是什么导致这种行为。 我无法访问我的HTML表单上的input字段和textarea 。
不幸的是，JS，HTML和CSS非常大，所以我不能在这里发布。
有人可以告诉我在debugging这个奇怪的行为时要查找什么吗？
UPDATE
如果我将光标移到input字段上，我可以看到文本光标，但是当我点击它时，字段没有得到焦点。 我可以通过按Tab键访问该字段，如果我右键单击它，然后单击该字段，我也得到它的焦点。
…并没有，他们没有disabled或readonly属性;-)
当我点击它的领域没有得到重点。 我可以通过按“tab键”访问该字段
这听起来像你已经取消了mousedown事件的默认行动。 search你的HTML和JS的onmousedown处理程序，并寻找一个读取的行。
return false;
这条线可能会阻止你通过单击来关注焦点。
Re：你的评论，我假设你不能编辑添加这个处理程序的代码？ 如果可以的话，最简单的解决办法就是删除return false; 声明。
有没有一种方法可以添加function的事件触发器不覆盖它？
这取决于处理程序是如何连接的。 如果使用传统的注册方法（例如element.onmousedown）附加它，则可以为其创build一个包装器：
var oldFunc = element.onmousedown; element.onmousedown = function (evt) { oldFunc.call(this, evt || window.event); }
由于这个“包装器”不返回false ，它不会取消元素的默认操作（聚焦）。 如果使用高级注册方法（如addEventListener或attachEvent ）附加事件，则只能使用函数名称/引用删除事件处理程序，并使用类似于上面的包装函数重新附加该事件处理程序。 如果它是一个添加的匿名函数，并且您不能获得对它的引用，那么唯一的解决scheme就是附加另一个事件处理函数，并使用element.focus（）方法手动聚焦元素。
我也有这个问题。 我在包含我的input字段的父DIV上使用了jQuery UI的disableSelection()方法。 在Chrome中，input字段不受影响，但是在Firefox中，input（以及textareas）并没有专注于单击。 这里奇怪的是，这些input上的点击事件工作。
解决方法是删除父DIV的disableSelection()方法。
我知道这是一个非常古老的线索，但最近刚刚发生这种事情; 花了我一段时间才弄明白。
同样的问题可以通过在“标签”标签对中放置“input”元素来引起。
在我的情况下，我曾打算创build一对“div”标签，但是我意外地创build了一对“标签”标签，然后使用DOM插入一些文本input字段“input type =”text“..”。
它在屏幕上正常显示，但是当我点击任何文本字段时，光标不断跳回到第一个“input”，实际上是不稳定的。
花了我一段时间才弄明白这一点，因为这种行为是微妙的，而不是我所期望的那样做出这种错误。
bsnider
对input标签使用onclick="this.select()"属性。
前段时间我一直在处理同样的问题。 我在一个模式的jquery-ui对话框中使用jquery.layout插件，我无法访问它的任何字段。
这似乎是一个z-index问题（一些div是在我的input字段，所以我不能点击它们）。 你应该检查出来，并尝试改变你的input字段的z-index值。
有时会在表单中存在不平衡的<label>标签时发生。
我也有这个问题，在我的情况下，我发现字体的颜色是背景相同的颜色，所以它看起来像什么都没有发生。
如果您在使用移动设备上的DOM使用canvas时遇到了这个问题， Ashwin G的答案完美地为我工作，但我通过javascript
var element = document.getElementById("myinputfield"); element.onclick = element.select();
之后，一切都完美无瑕。
我已经阅读了上面所有的答案，有些则指示我解决问题，而不是解决问题。
问题的根本原因是disableSelection() 。 这是造成所有问题的原因，但是在触摸屏设备上（至less在2016年或者稍微早些时候），并不是解决scheme，如果您希望能够使用jQuery移动对象。
解决方法是将disableSelection()保留给可sorting元素，但是也可以在上面添加一个绑定操作：
$('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) { event.stopImmediatePropagation(); })
jQuery元素中的form只是为了阻止表单上的传播，因为您可能需要传播一些元素。
如果你不把你的列放在<div class ='row'>里，这可以在bootstrap中发生。 列浮动不清除，你可以得到覆盖以前的下一列，因此点击不会击中你期望的dom元素。
我有这个问题，因为这个代码：
$("#table tbody tr td:first-child").bind("mousedown", function(e){ e.preventDefault(); $(this).parents('tr').removeClass('draggable'); });
我通过删除来解决它
e.preventDefault（）;
新代码：
$("#table tbody tr td:first-child").bind("mousedown", function(){ $(this).parents('tr').removeClass('draggable'); });
我有类似的问题 – 无法弄清楚是什么原因，但我使用下面的代码修复它。 不知何故，它不能只关注空白input：
$('input').click(function () { var val = $(this).val(); if (val == "") { this.select(); } });
我正在使用JQuery UI和Bootstrap，所以我面临这个问题，我认为这是两者之间的冲突，因为在正常情况下，textarea或input字段是由大自然编辑的，但我做了这个解决scheme后，testing所有上述答案，但没有解决所有主要浏览器的跨浏览器支持 ，但我解决了它，我喜欢分享我的解决scheme，您可以使用它在input文本和textarea
（在桌面上testing：IE浏览器（所有版本），Chrome浏览器，Safari浏览器，Windows Edge，Firefox，Visual Studiocordova波纹查看器在Windows和Visual StudiocordovaWindows 10商店应用程序）
（在移动设备上testing：Chrome，Firefox，Android Internet浏览器和Visual Studio Cordova在Android和Visual Studio Cordova上的应用程序Windows 8 + 8.1 + 10电话应用程序）
这是HTML代码：
<textarea contenteditable id="textarea"></textarea>
这是CSS代码：
textarea { -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; /*to make sure that background color and text color is not the same (from the answers above)*/ background-color:#fff !important; color:#733E27 !important; }
这是文档就绪的JQuery代码
$("textarea").click(function() { setTimeout(function(){ $("textarea").focus(); //add this if you are using JQuery UI (From The Solutions Above) $("textarea").enableSelection(); var val = $("textarea").val(); if (val.charAt(val.length-1) !== " " && val.length !== 1) { alert(val.length); val += " "; } $("textarea").val(val); }, 0); }); if (navigator.userAgent.indexOf('Safari') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) { //alert('Its Safari or chrome'); $("textarea").onfocus(function(e) { setTimeout(function(){ var end; if ($("textarea").val === "") { end = 0; } else { end = $("textarea").val.length; } if ($("textarea").setSelectionRange) { var range = document.getElementById('textarea').createTextRange(); if (range) { setTimeout(range, 0, [end, end]); } else { // IE style var aRange = document.getElementById('textarea').createTextRange(); aRange.collapse(true); aRange.moveEnd('character', end); aRange.moveStart('character', end); aRange.select(); } } e.preventDefault(); return false; }, 0); }); }
您可以在我的web应用程序www.gahwehsada.com上进行testing
当你说
and nope, they don't have attributes: disabled="disabled" or readonly ;-)
这是通过查看您的HTML，页面的源代码或DOM吗？
如果您使用Chrome或Firefox检查DOM，那么您将能够看到通过javasript添加到input字段的任何属性，甚至可以覆盖div
为了防止别人正在寻找这个答案，我们遇到了类似的问题，通过改变input标签的z-index来解决这个问题。 显然，其他一些div已经延伸得太远了，并且重叠了input框。
我有同样的问题。 我最终通过检查元素和我认为我select的元素是不同的元素来了解它。 当我这样做的时候，我发现有一个隐藏的元素，Z索引9999，一旦我确定我的问题消失了。
我有这个问题超过6个月，这可能是同样的问题。 主要症状是您不能移动光标或在文本input中select文本，只有箭头键可以在input字段中移动。 非常恼人的问题，特别是textareainput字段。 我有这个html，通过Javascript填充100个表单中的1个：
<div class="dialog" id="alert" draggable="true"> <div id="head" class="dialog_head"> <img id='icon' src='images/icon.png' height=20 width=20><img id='icon_name' src='images/icon_name.png' height=15><img id='alert_close_button' class='close_button' src='images/close.png'> </div> <div id="type" class="type"></div> <div class='scroll_div'> <div id="spinner" class="spinner"></div> <div id="msg" class="msg"></div> <div id="form" class="form"></div> </div> </div>
显然6个月前，我试图让popup可拖动和失败，同时打破文本input。 一旦我删除draggable =“true”它再次工作！
对我来说问题是，我正在使用class="modal fade" ，我改变了class="modal hide" 。 这解决了这个问题。
我刚刚发现这个问题的另一个可能的原因，一些input文本框丢失closures“/”，所以我有<input ...>当正确的forms是<input ... /> 。 这为我修好了。
在我的情况下，它是在打开状态下的Bootstrappopup。 文本input是在Bootstrap之一的另一个日历popup窗口中，input在从Bootstrap模式中删除tabindex="-1"属性后重新获得焦点。
我有同样的问题。 把我的头发花费几个小时尝试各种解决scheme。 原来是一个未封闭的标签。尝试validation您的HTML代码，解决scheme可能是一个未封闭的标签导致问题
我有这个问题使用Bootstrap +联系表格7.我出于某种原因，我把标签作为forms的容器，这是不能在移动select的问题。
<label> <contact form>...</contact form> </label>
似乎打破除第一个input和提交之外的所有input。
iPhone6的铬
问题是我把input字段放在<label>和<p>
喜欢这个 ：
<label> <p> <input/> </p> </label>
我改变了他们
<div> <div> <input/> </div> </div>
它适用于我。
检查完这个答案后，请检查本页面的其他答案，这个问题可能有不同的原因
这也将发生任何时候一个div结束定位在另一个div中的控件; 比如使用bootstrap进行布局，然后有一个“col-lg-4”，接着是“col-lg = 8”拼写错误…右侧的孤立/错误的div覆盖左侧，捕获鼠标事件。 容易被拼写错误， – 和=在键盘上彼此相邻。 所以，支付与检查员审查，并寻找“惊喜”揭露这些野生divs。
是否有一个看不见的窗口覆盖控制和阻塞事件，如何发生？ 原来，fatfingering = for – 引导类名是一种方法…
