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

Posted

技术标签:

【中文标题】单击时 HTML 输入字段未获得焦点【英文标题】:HTML input fields does not get focus when clicked 【发布时间】:2011-04-13 02:10:28 【问题描述】:

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

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

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

更新

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

...不,它们没有 disabledreadonly 属性 ;-)

【问题讨论】:

听起来你有一个焦点/模糊的事情。你能在代码中寻找模糊吗? 你能不能查看生成的源代码,只复制一个无法正常工作的文本字段的实例...如果没有看到任何东西就很难诊断问题...什么插件你在跑吗...关掉你所有的插件禁用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,它不会取消元素的默认动作(聚焦)。如果您的事件是使用高级注册方法附加的,例如 addEventListenerattachEvent,那么您只能使用函数名称/引用删除事件处理程序并使用包装的重新附加它功能与上述类似。如果它是添加的匿名函数并且您无法获得对它的引用,那么唯一的解决方案是附加另一个事件处理程序并使用 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 UIBootstrap 所以我遇到了这个问题,我认为这是两者之间的冲突,因为在正常情况下是 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。显然 alertconfirm 不完全被 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】:

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

【讨论】:

【参考方案19】:

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

【讨论】:

从 bootstrap modal 中移除 tabindex 后是否没有引起行为问题?【参考方案20】:

iPhone6 镀铬

我的问题是将输入字段放在 &lt;label&gt;&lt;p&gt;

像这样:

<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 树的该级别移出的问题,因此基于 rowcol 类重新平衡引导逻辑层次结构。

【讨论】:

【参考方案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>

【讨论】:

以上是关于单击时 HTML 输入字段未获得焦点的主要内容,如果未能解决你的问题,请参考以下文章

Android TextField:以编程方式设置焦点+软输入

当输入字段获得焦点时,按钮被输入字段隐藏

更改编辑模式Vue.js + Typescript后如何专注于输入字段

如何在 HTML5 的数字输入中显示占位符的文本

显示后焦点()未在输入字段上设置(使用参考)

在本机反应中单击 TextInput 字段外部时失去焦点并关闭键盘?