单击时，HTML输入字段无法获得焦点

我有一个问题，我无法弄清楚到底是什么引起了这种现象。我无法访问textareaHTML表单上的输入字段和。

不幸的是，JS，HTML和CSS很大，所以我不能在这里全部张贴。

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

更新

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

...而且不，它们没有disabledorreadonly属性；-)

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

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

return false;

此行可能使您无法单击集中注意力。

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

有没有一种方法可以通过不覆盖事件触发器来仅为其添加功能？

这取决于处理程序的附加方式。如果使用传统的注册方法（例如element.onmousedown）进行附加，则可以为其创建包装器：

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

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

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

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

我知道这是一个非常老的话题，但这是最近才发生的事。花了我一段时间才弄清楚。

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

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

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

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

bsnider

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

前一段时间我一直在努力解决相同的问题。我在模式jquery-ui对话框中使用了jquery.layout插件，但无法访问其中的任何字段。

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

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

我也遇到了这个问题，就我而言，我发现字体的颜色与背景的颜色相同，因此看起来什么也没发生。

如果您没有将列放置在内，则会在引导程序中发生<div class ='row'>。该列的浮动内容不会清除，您可以将下一个列覆盖在前一个列上，因此点击不会在您期望的位置击中dom元素。

如果您在移动设备上使用带有DOM的canvas时遇到此问题，那么答案Ashwin G对我来说很完美，但是我通过javascript做到了

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

之后，一切都完美无瑕。

我已经阅读了上面所有的答案，有的将我引向了问题所在，但没有找到解决问题的办法。

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

解决的办法是将保留disableSelection()给sortable元素，还要在上面添加一个绑定操作：

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

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

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

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

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

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

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

（已在台式机上测试：IE（所有版本），Chrome，Safari，Windows Edge，Firefox，Windows和Visual Studio Cordova Windows 10 Store App上的Visual Studio Cordova Ripple Viewer）

（在移动设备上测试：Chrome，Firefox，Android Internet浏览器和Android和Visual Studio Cordova Windows 8 + 8.1 + 10 Phone App上的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);
        });
    }

您可以在我的Web应用程序上对其进行测试，网址为www.gahwehsada.com

当你说

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

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

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

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

我有这个问题超过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 =“ true”，它就会再次起作用！

我只是找到了此问题的另一个可能原因，某些输入文本框缺少结尾的“ /”，因此<input ...>当正确的格式为时，我才知道<input ... />。这为我解决了。

在我的情况下，它是处于打开状态的Bootstrap弹出窗口。文本输入位于Bootstrap顶部的另一个日历弹出窗口中，tabindex="-1"从Bootstrap模态中删除属性后，输入重新回到了焦点位置。

iPhone6镀铬

问题对我来说是将输入字段中<label>和<p>

像这样 ：

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

我将它们更改为

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

它对我有用。

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

每当一个div最终定位在另一个div的控件上方时，也会发生这种情况；例如使用引导程序进行布局，并使用“ col-lg-4”后跟“ col-lg = 8”拼写错误...右侧的孤立/命名错误的div覆盖了左侧，并捕获了鼠标事件。拼写错误很容易使键盘和-彼此相邻。因此，值得与检查员一起检查并寻找“惊奇”来发现这些疯狂的div。

是否有一个看不见的窗口覆盖控件和阻止事件，这怎么发生？事实证明，fatfingering = for-使用引导程序类名是一种方法...

我有同样的问题。最终，我通过检查该元素找到了答案，而我认为我选择的元素是不同的元素。当我这样做时，我发现存在一个隐藏元素，其z-index为9999，一旦我解决了问题，它就会消失。

对我来说，问题是我正在使用 class="modal fade"，我将其更改为 class="modal hide"。那解决了问题。

我有同样的问题。尝试各种解决方案将我的头发撕裂数小时。原来是一个未关闭的标签。请尝试验证您的HTML代码，解决方案可能是一个未关闭的标签，从而导致问题

我在使用Bootstrap +联系表单7时遇到了这个问题。出于某种原因，我将标签放在表单的容器中，这就是无法在移动设备上选择的问题。

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

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

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

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

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

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

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

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

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

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

希望这可以帮助某人

丹尼尔