1

I'm developing a chrome extension with an options screen. It contains a 10x5 grid form input and I'm trying to get the fields to autofocus to the next one as the user enters data. I followed the code listed on this question: Using Javascript to Auto move cursor onto next form field

However, when I load the extension the focus to next field doesn't work when I click on options under the extension. When I load the options.html file by itself then the focus functions work just fine. Somehow the function to focus doesn't work within the options screen in Chrome but does when I just load the html file by itself.

Is there something special about the Chrome options screen that prevents the focus from working?

Code samples: 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>

The script is also in the html form for right now:

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

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

</script>
deowk
  • 4,280
  • 1
  • 25
  • 34
JSchultz
  • 13
  • 3

2 Answers2

0

I think you are trying to execute a script in a <script></script> tag. This is not allowed by Content Security Policy of Google Chrome.

See this for more information about what is considered by Chrome as unsafe.

If you are not trying to use script tags, please look at console and tel us if some errors are reported.

Emrys Myrooin
  • 2,179
  • 14
  • 39
  • Thanks. It does look like CSP is blocking the execution. I will try via event handlers and see if that works instead. – JSchultz Oct 26 '15 at 16:44
  • You simply have to moove your code to a seprated .js file and link it on your HTML file via script tag with src attribute – Emrys Myrooin Oct 26 '15 at 17:00
0

So the Content Security Policy prohibits me from calling scripts from the html code directly. As suggested, I moved that code to a separate javascript file. Normally that should work except I forgot that when calling scripts with parameters it needs to be in the following format:

Bad (what I had):

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

Good:

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

Rule: When passing parameter values, use an "anonymous function" that calls the specified function with the parameters.

Thanks for everyones input.

JSchultz
  • 13
  • 3