Question

我正在开发带有选项屏幕的Chrome扩展程序。它包含一个10x5网格表格输入，我试图让用户输入数据时自动对焦到下一个字段。我按照这个问题列出的代码： Using Javascript to Auto move cursor onto next form field

但是，当我加载扩展时，当我点击扩展名下的选项时，焦点到下一个字段不起作用。当我自己加载options.html文件时，焦点函数工作正常。不知何故，焦点功能在Chrome的选项屏幕中不起作用，但是当我只是自己加载html文件时。

Chrome选项屏幕是否有一些特殊内容可以阻止焦点工作？

代码示例： options.html

<td><input type="text" size="1" maxlength="1" id="A1" onkeyup="moveOnMax(this,document.getElementById('B1'))" autofocus></td>
<td><input type="text" size="1" maxlength="1" id="B1" onkeyup="moveOnMax(this,document.getElementById('C1'))"></td>
<td><input type="text" size="1" maxlength="1" id="C1"></td>
<td><input type="text" size="1" maxlength="1" id="D1"></td>

该脚本现在也是html格式：

<script language="javascript" type="text/javascript"> 

   function moveOnMax(field, nextFieldID) { 
      if (field.value.length >= field.maxLength) { 
         nextFieldID.focus(); 
      } 
   } 

</script>

Answer 1

我认为您正在尝试在<script></script>标记中执行脚本。 Google Chrome的内容安全政策不允许这样做。

See this了解有关Chrome被视为不安全内容的更多信息。

如果您不想使用脚本标记，请查看控制台并告知我们是否报告了一些错误。

Answer 2

因此内容安全策略禁止我直接从html代码调用脚本。正如所建议的那样，我将该代码移动到一个单独的javascript文件中。通常这应该工作，除了我忘了在调用带参数的脚本时，它需要采用以下格式：

糟糕（我拥有的）：

document.getElementById('A1').addEventListener('keyup', moveOnMax(this, document.getElementById('B1')));

好：

document.getElementById('A1').addEventListener('keyup', function() {
  moveOnMax(this, document.getElementById('B1')); 
});

规则：传递参数值时，使用“匿名函数”，使用参数调用指定的函数。

感谢每个人的投入。

Chrome - 扩展选项屏幕不允许我关注下一个字段

2 个答案: