WebView - How to set focus to the first form field

Scriptable
1

Hi

I’ve tried autoFocus without success.

Basically, I want to display the form with the cursor positioned in the text field ready to type.

Here is my code…

let strHTMLOriginal = `<!DOCTYPE html>
<html>
<head>
    <title>Set focus to the first form field</title>
</head>
  
<body>
	<form>
            Some Text: <input type="text" id="input1" 
                autofocus />
   	</form>
</body>
  
</html>`

let viewOne = new WebView();
await viewOne.loadHTML(strHTMLOriginal);
await viewOne.present();

Script.complete()

Thanks

2

Adding

<script>
setTimeout(() => {
  document.getElementById("input1").focus();
}, 1000);
</script>

after your <form> should do the trick. You can also adjust the time it’s waiting (the 1000 in milliseconds) but if you reduce it too much it might not work.

If this doesn’t work then I unfortunately have no further ideas.

3

Hi schl3ck

Thanks.

I’m using an external keyboard my aim is to run the script, enter my data, ⌘ + . to close the WebView. Quick and easy.

I’ve tried lots of key combinations eg tab, shift tab etc to get the focus to the first field. The only thing that does work is actually tapping the field.

document.getElementById("input1").focus();

should work, but doesn’t seem to. I’m not sure why.

I’ve tried your suggestion too, with different delays but no joy.

I’ve tried using focus in an onload function as well. Didn’t work either.

Looks like I’ll need to live with it. Scriptable is great and very powerful.

Many thanks for your help.

4

Since you’re using a hardware keyboard you could try adding a listener to the keydown event on the body and whenever a key was pressed and the text field doesn’t have the focus then set the focus. If you have also other fields then only focus on the first keydown after the page was loaded.

5

Hi schl3ck

I tried a few things to add a listener, not sure my coding was right.

However, I tried this code to see if the document itself has focus when it is opened. It doesn’t which seems strange. When I tap the document and make it active the focus works. Is there a way to make the document active programatically?

let strHTMLOriginal = `
<!DOCTYPE html>
<html>
<body>
<h1>Document Focus</h1>
<p>Click inside this document to get focus.<br>
Click outside this document to lose focus.</p>
Text 1: <input type="text" id="input1" />
Text 2: <input type="text" id="input2" />
<p id="demo"></p>
<script>
setInterval("myFunction()", 1);

function myFunction() {
  let text;
  if (document.hasFocus()) {
    text = "The document has focus.";
		document.getElementById("input1").focus();
  } else {
    text = "The document does NOT have focus.";
  }
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
`

let viewOne = new WebView();
await viewOne.loadHTML(strHTMLOriginal);
await viewOne.present();
Script.complete()

Many thanks again.

6

That is a very interesting find! Probably because of this your very first attempt with the autofocus attribute didn’t work either. Unfortunately I don’t know of any workaround.