Question

我正面对众所周知的Chrome＆＃34;＃focusable-input＆＃34;错误，但我的情况不同于我在那里找到的另一篇文章中的解释。

我首先在一个指向良好的输入上重复此错误消息，此输入没有必需的属性：代码：

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

错误： 名称=＆＃39; priceFinal＆＃39;的无效表单控件无法集中精力。

当用户填写表单时，此字段通过带有jquery的js脚本获取其值。用户在另一个输入中键入一个大小，脚本使用大小值进行数学运算，然后将结果放在＆＃39; priceFinal＆＃39;使用jquery函数输入：.val（）

在浏览器中，我们可以看到输入正确填充，此时没有显示错误。并且通过＆＃39; novalidate＆＃39;解决方案一切顺利，所以我认为它不能对不可聚焦的错误负责。

然后我得到了同样的错误，输入没有名字，我没有写，也没有在我的DOM中存在：

名称为＆＃39;＆＃39;的无效表单控件无法集中精力。

这很奇怪，因为我的表单中没有名字的唯一输入是类型：提交一个

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

我有一些必填字段，但是我发送表单时总是检查它们是否已填满。我粘贴它以防它可以提供帮助：

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

novalidate解决方案清除错误但它没有解决它，我的意思是必须有一种方法来解决它没有黑客。

任何人都知道可能会发生什么？感谢

Answer 1

我遇到了同样的问题，并且每个人都指责所需的隐藏输入很差，但看起来像是一个在字段集中包含所需字段的错误。 Chrome会尝试关注（出于某种未知原因）您的字段集而不是您所需的输入。

此错误仅出现在版本43.0.2357.124 m中测试的chrome I中。并不是在Firefox中发生的。

示例（非常简单）。

＆＃13;

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

＆＃13;

name='mybug'无效的表单控件无法调焦。

这个bug很难被发现，因为通常字段集没有名称所以name=''是WTF！但是一块一块地切成薄片，直到找到了小鹦鹉。如果从字段集中获得所需的输入，则错误消失。

＆＃13;

<form>
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>

  <fieldset name="mybug">
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

＆＃13;

我会举报，但我不知道Chrome社区的bug在哪里。

Answer 2

感谢这篇文章，我发现我的问题还在于Chrome尝试关注我的字段集，而不是输入字段。

要从控制台获得更好的响应：

为每个DOM元素分配一个新名称
设置每个输入和输入选择style.display到＆＃39;阻止＆＃39;

将输入[type =＆＃34;隐藏＆＃34;]元素的类型更改为＆＃39; text＆＃39;

function cleanInputs(){
    var inputs  = document.getElementsByTagName( 'input' ),
        selects = document.getElementsByTagName( 'select' ),
        all     = document.getElementsByTagName( '*' );
    for( var i=0, x=all.length; i<x; i++ ){
        all[i].setAttribute( 'name', i + '_test' );
    }
    for( var i=0, x=selects.length; i<x; i++ ){
        selects[i].style.display = 'block';
    }
    for( var i=0, x=inputs.length; i<x; i++ ){
        if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
            inputs[i].setAttribute( 'type', 'text' );
        }
        inputs[i].style.display = 'block';
    }
    return true;
}

在控制台中，我运行了cleanInputs（），然后提交了表单。来自控制台的结果是：

名称为＆＃39; 28_test＆＃39;的无效表单控件不可专注。

名称=＆＃39; 103_test＆＃39;的无效表单控件不可专注。

然后，切换到Web Developer＆＃34; Elements＆＃34;看来，我能够找到＆＃34; 28_test＆＃34;和＆＃34; 103_test＆＃34; （两个字段集） - 确认我的问题是一个必需的输入字段，嵌套在字段集中。

Answer 3

我遇到了同样的问题所以我删除了必需的=＆＃34;必需＆＃34;来自麻烦的领域。

Answer 4

如果在执行jQuery函数时出现错误，请尝试将＆＃34;返回false＆＃34;关于你的功能，或功能（e）{e.preventDefault（）; ......}

Answer 5

在我写这个问题的过程中，我意识到了一件事：剧本赋予＆＃39; priceFinal＆＃39;字段有时是十进制数。

在这种情况下，解决方案是为此输入编写step属性：

... step="any" ...

Step on w3s

所以这个＆＃39; nofocusable＆＃39; bug不仅是一个必需的和隐藏的字段问题，它也是由格式冲突产生的。

Answer 6

Nach给了我最好的指针......（y）我还有一个输入类型=＆＃34;数字＆＃34;步骤=＆＃34; 0.1＆＃34;并且控制台在验证时显示此错误：名称为＆＃39;＆＃39;的无效表单控件不可专注。

删除步骤=＆＃34; 0.1＆＃34;在元素上，现在可以验证表单

Answer 7

我曾经有过这个问题。修复它，添加

novalidate

作为表单的属性。 e.g

<form action="" novalidate>
....
</form>

Answer 8

这是解决方案......

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

许多人没有意识到将false传递给ng-required会禁用该指令。

一个名为=＆＃39;＆＃39;的无效表单控件不可专注。没有任何要求或隐藏输入

8 个答案: