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

Question

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

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

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

更新

如果我将光标移到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

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

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

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

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

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

之后，一切都完美无瑕。

Answer 9

如果您不将列放在<div class ='row'>内，则可能会在引导程序中发生这种情况。列浮动不会被清除，您可以使下一列覆盖前一列，因此点击不会达到您期望的dom元素。

Answer 10

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

问题的根本原因是disableSelection()。它导致所有问题，但删除它不是一个解决方案，因为（至少在2016年或稍前），在触摸屏设备，你有＆＃34;有＆＃34;如果你想用jQuery移动对象，可以使用它。

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

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

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

Answer 11

由于此代码，我遇到了这个问题：

$("#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');
});

Answer 12

我有类似的问题 - 无法弄清楚是什么原因，但我使用以下代码修复它。不知何故，它无法只关注空白输入：

$('input').click(function () {
        var val = $(this).val();
        if (val == "") {
            this.select();
        }
    });

Answer 13

我正在使用 JQuery UI 和 Bootstrap ，所以我遇到了这个问题，我认为这是两者之间的冲突，正常情况下是textarea或者输入字段本质上是可编辑的，但我在测试了上述所有答案之后制作了这个解决方案，但没有解决所有主流浏览器的跨浏览器支持，但我解决了它，我喜欢分享我可以使用的解决方案它在输入文本和textarea

（在桌面上测试：IE（所有版本），Chrome，Safari，Windows Edge，Firefox，Windows上的Visual Studio Cordova Ripple Viewer和Visual Studio Cordova Windows 10商店应用）

（在移动设备上测试：Chrome，Firefox，Android互联网浏览器以及Android和Visual Studio Cordova Windows 8 + 8.1 + 10手机应用中的Visual Studio Cordova应用程序）

这是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);
        });
    }

您可以在我的网络应用程序www.gahwehsada.com

上对其进行测试

Answer 14

我有这个问题超过6个月，可能是同一个问题。主要症状是您无法移动光标或选择文本输入中的文本，只有箭头键允许您在输入字段中移动。非常讨厌的问题，特别是对于textarea输入字段。我有这个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个月前我曾试图让弹出窗口拖拽失败，同时打破文本输入。一旦我删除了draggable =＆＃34; true＆＃34;它又有效了！

Answer 15

iPhone6 chrome

我的问题是将输入字段放在<label>和<p>

中 像这样：

<label>
  <p>
     <input/>
  </p>
</label>

我将它们改为

<div>
  <div>
     <input/>
  </div>
</div>

它对我有用。

检查完此答案后，请检查此页面中的其他答案，此问题可能有不同的原因

Answer 16

我刚刚发现了另一个可能的原因导致此问题，某些输入文本框缺少结束“/”，因此当正确的表单为<input ...>时，我有<input ... />。这为我解决了。

Answer 17

以防万一其他人正在寻找这个答案，我们遇到了类似的问题，并通过更改输入标签的z-index解决了这个问题。显然其他一些div已经扩展得太远而且与输入框重叠。

Answer 18

当你说

时

and nope, they don't have attributes: disabled="disabled" or readonly ;-)

这是通过查看您的html，页面的源代码还是DOM？

如果您使用Chrome或Firefox检查DOM，那么您将能够通过javasript或甚至是重叠的div看到添加到输入字段的任何属性

Answer 19

问题在于我使用class="modal fade"，我将其更改为class="modal hide"。这解决了这个问题。

Answer 20

我遇到了同样的问题。我最终通过检查元素来判断它，我认为我选择的元素是不同的元素。当我这样做时，我发现有一个隐藏元素的z-index为9999，一旦我修复了我的问题就消失了。

Answer 21

我遇到了同样的问题。尝试各种解决方案，将头发磨了好几个小时。原来是一个未公开的 a 标签。尝试验证您的HTML代码，解决方案可能是一个未关闭的标签导致问题

Answer 22

我使用Bootstrap +联系表单7来解决这个问题。 我出于某种原因将标签作为表格的容器，这是在移动设备上无法选择的问题。

<label>
    <contact form>...</contact form>
</label>

似乎打破除第一个输入和提交之外的所有输入。

Answer 23

我遇到了同样的问题，解决方法是删除占位符，然后将表单的设计更改为使用标签代替占位符...

Answer 24

我遇到这个问题是由于Sent元素与引导程序ü与“兄弟” div元素与class ="row"重叠，第一个隐藏第二个div元素的焦点。

我解决了从divs树的该级别之外获取class="col"元素的问题，因此重新平衡了基于div和div row类的引导逻辑层次结构。

Answer 25

我刚才在React中也遇到了同样的问题。

我在路由器中找到了路由。我们无法执行此操作，因为它会导致关闭移动键盘的问题。

<Route 
 path = "some-path"
 component = {props => <MyComponent />}
 />

请确保在这种情况下改用渲染器

<Route 
 path = "some-path"
 render = {props => <MyComponent />}
 />

希望这对某人有帮助

丹尼尔

Answer 26

值得补充的是，在输入标签上设置 pointer-events:none 属性也会产生这种不需要的行为。

Answer 27

对于任何使用 Electron 的人

对于任何在使用 Electron 时遇到此问题的人，我的问题是在选择输入字段之前使用 alert。显然，Electron 并不完全支持 alert 和 confirm，因此可能会弄乱输入字段。如果您仍想使用它们，请参阅此帖子：https://stackoverflow.com/a/38859135/12293837

Answer 28

当div最终定位在另一个div中的控件上时，也会发生这种情况;比如使用bootstrap进行布局，并使用“col-lg-4”后跟“col-lg = 8”拼写错误......右边的孤立/错误命名的div覆盖左边，并捕获鼠标事件。通过拼写错误轻松吹响 - 和=在键盘上彼此相邻。因此，需要与检查员一起检查并寻找“惊喜”来揭示这些狂野的div。

是否有一个看不见的窗口覆盖控件和阻止事件，这怎么可能发生？事实证明，fatfingering = for - with bootstrap classnames是一种方式......