单击时 HTML 输入字段未获得焦点

Posted 2023-05-07

【中文标题】单击时 HTML 输入字段未获得焦点

【英文标题】：HTML input fields does not get focus when clicked

【发布时间】：2011-04-13 02:10:28

【问题描述】：

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

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

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

更新

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

...不，它们没有 disabled 或 readonly 属性 ;-)

【问题讨论】：

听起来你有一个焦点/模糊的事情。你能在代码中寻找模糊吗？

你能不能查看生成的源代码，只复制一个无法正常工作的文本字段的实例...如果没有看到任何东西就很难诊断问题...什么插件你在跑吗...关掉你所有的插件禁用javascript看看你是否还有问题

对于select2 in bootstrap modal 相关问题请参阅此thread

【参考方案1】：

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

听起来您已经取消了 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() 方法手动聚焦该元素。

【讨论】：

哦不！是的，这就是问题所在。有没有办法通过不覆盖来向事件触发器添加功能？

@helle：你有几个选择，我更新了我的答案，提供了更多信息。

谢谢。这是我的问题。在 mousedown 中防止默认（）。有趣的是它不会影响 元素。

它不影响按钮真的很奇怪！我有同样的问题，它只影响文本类型的输入字段..

我试图将所有附加的事件一一删除，似乎焦点事件之一是罪魁祸首，那么如何删除事件中的焦点，特别是这个输入？

【参考方案2】：

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

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

【讨论】：

谢谢！为我节省了很多时间试图重新编码我的工作，认为这是其他事情。我有这个 .sortable ，最后附加了 .disableSelection() 。这就是我从互联网上复制和粘贴所得到的。 :)

@Armin，谢谢。你可能为我节省了几个小时的工作时间。非常感谢！

【参考方案3】：

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

【讨论】：

这使光标进入了文本框，但我仍然无法输入。

这对我有用，但它也选择了已经存在的任何文本，所以我改用 this.focus() :)

【参考方案4】：

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

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

在我的例子中，我本来打算创建一对“div”标签，但我不小心创建了一对“label”标签，然后使用 DOM 插入了一些文本输入字段“input type="text"..” .

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

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

bsnider

【讨论】：

这是我的问题，特别是在 Firefox 中。这在使用 Zurb Foundation 时尤其成问题，因为文档有 <input> 嵌套在 <label> 中。将其移出解决了我的问题，并且呈现的内容相同。

您是如何解决问题的？我在div里面有输入，div是可拖动的，但是不能输入，点击时光标每次都跳到末尾。

即使<input> 元素仅嵌套在一个<label> 标记内，我也遇到了这种情况。确实是非常微妙的行为。

我在同一个标​​签元素中有两个输入元素。第二个无法获得焦点。

【参考方案5】：

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

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

【讨论】：

或者使其不透明以查看重叠的位置

或者使用开发者工具栏中的属性检查器。

【参考方案6】：

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

【讨论】：

+1 - 我会一直在寻找这个，我的确切问题。

什么是“不平衡”<label> 标签？你的意思是无效的 HTML 语法？

@GlennG unbalanced 表示打开标签没有相应的结束标签。

单例标签应该是自封闭的，例如<br />。单独的 <label> 标签没有意​​义。

【参考方案7】：

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

【讨论】：

这里相同 :) 使用 SASS 并使用配置变量设置字体颜色。显然表单字段使用相同的变量，我在黑色 bg 类型的页面上做一个白色文本，所以表单字段变成白色 bg 上的白色文本。

【参考方案8】：

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

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

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

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

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

【讨论】：

谢谢，有很多人在您的评论上方+1....但是您的 cmets 是我的情况的唯一解决方案。这是我在类型编号内使用带有输入框的可拖动控件。再次感谢:)

对元素进行了一些调整，瞧！谢谢 ！我也在使用 SORTABLE。

【参考方案9】：

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

【参考方案10】：

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

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

之后，一切都完美无缺。

【讨论】：

这对我有用，与 Modernizr 结合以仅针对触摸设备（尽管我使用了focus()，因为如果实际文本已经填充，我不希望选择它）。

【参考方案11】：

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

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

【参考方案12】：

因为这段代码我遇到了这个问题：

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

【参考方案13】：

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

【参考方案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="true" ，它就会再次起作用！

【讨论】：

关于包含 div 的 draggable="true" 的更多信息：developer.microsoft.com/en-us/microsoft-edge/platform/issues/…

【参考方案15】：

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

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

（在移动设备上测试：Chrome、Firefox、android Internet 浏览器和 Android 上的 Visual Studio Cordova 应用程序和 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);
        );
    

你可以在我的网络应用程序上测试它www.gahwehsada.com

【讨论】：

这个问题，不涉及bootstrap。只是说

我明白了，但我提到了，因为没有理由不能编辑文本区域，除非框架中存在冲突（当然，如果没有设置只读选项）

【参考方案16】：

对于任何使用 Electron 的人

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

【参考方案17】：

当你说

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

这是通过查看您的 html、页面的源代码还是 DOM 来实现的？

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

【参考方案18】：

我刚刚发现了这个问题的另一个可能原因，一些输入文本框缺少结束的“/”，所以当正确的形式是 <input ... /> 时，我有 <input ...>。这为我解决了问题。

【参考方案19】：

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

【讨论】：

从 bootstrap modal 中移除 tabindex 后是否没有引起行为问题？

【参考方案20】：

iPhone6 镀铬

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

像这样：

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

我把它们改成

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

它对我有用。

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

【参考方案21】：

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

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

【参考方案22】：

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

【参考方案23】：

我的问题是我使用的是class="modal fade"，我将其更改为class="modal hide"。这样就解决了问题。

【讨论】：

感谢您指出有关 Bootstrap 模态的正确方向。

【参考方案24】：

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

【参考方案25】：

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

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

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

【参考方案26】：

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

【参考方案27】：

这个问题是由 div 元素与引导程序 class ="row" 与“兄弟”div 元素与 class="col" 的某种重叠引起的，第一个隐藏了第二个 @987654325 的焦点@ 元素。

我解决了将 div row 元素从 div 树的该级别移出的问题，因此基于 row 和 col 类重新平衡引导逻辑层次结构。

【参考方案28】：

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

我在路由器 Route 中发现了这一点。我们不能这样做，因为它会导致关闭移动键盘的问题。

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

确保在这种情况下使用渲染代替

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

希望这对某人有所帮助

丹尼尔

【参考方案29】：

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

【参考方案30】：

可能是因为标签属性中的for attribute无效

<input type="text" id="your_name" name="your_name">
<label for="your_name">Your Name</label>

<input type="text" id="your_email" name="your_name">
<label for="your_name">Your Name</label>

我尝试将第二个标签中的for attribute 更新为your_email 而不是your_name，它对我有用

<label for="your_email">Your Name</label>