How set Focus to an Editbox when loaded website into Webview?

awama · Sep 1, 2011

After loading a website into webview I want to set the focus to an Editbox which is included in the website. Is it possible? I have not found a function in the webview tutorial.

Many Thanks.
Walter

warwound · Sep 1, 2011

Here's a working webpage that once loaded will set the focus on the page's only text input element:

B4X:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form focus onload</title>
</head>
<body onLoad='document.forms[0].q.focus()'>
<div >
   <form method="GET" action="http://www.google.co.uk/search">
      <input type="image" src="my_folder/google.gif" width="128" height="53">
      <br>
      <input type="text" name="q" maxlength="255" value="" style="width:256px">
      <br>
      <input type="hidden" name="ie" value="UTF-8">
      <input type="hidden" name="oe" value="UTF-8">
   </form>
</div>
</body>
</html>

Have a Google for more info on using javascript to set the focus of a page element: javascript set focus - Google Search.

Watch though that the element you give focus to will scroll into view if not visible.
So if you set focus to a text box near the end of your page, the page will always load and display scrolled to the bottom (not always desired).

Martin.

awama · Sep 1, 2011

Martin, thanks for rapid reply,

if I understood right I have to manipulate a downloaded website and save it and reload the file in a webview and the focus was then adjust. Ok, I will try it.

Walter

warwound · Sep 2, 2011

A lot depends upon the scenario.

A little javascript can be injected into a webpgae once it's loaded and set the focus to a text input element.
BUT the javascript needs to know what element you want to focus on.

Presumably the webpage is not one that you have written so you have no control over the HTML in that webpage?

If the webpage is well written (ie valid HTML) then the input element could be part of a form.
If the form has an id attribute and the text input within the form has a name attribute then you're in luck:

B4X:

<script type="text/javascript">
document.forms.theFormId.theTextInputName.focus();
</script>

If the text input has an id attribute then:

B4X:

<script type="text/javascript">
document.getElementById('theTextInputId').focus();
</script>

These will work BUT if at any time in the future the webpage is updated and the ids or names of elements change then the javascript will no longer work - that's beyond your control.

You can get all elements of type 'input' and iterate through them:

B4X:

<script type="text/javascript">
var inputs=document.getElementsByTagName('input');
var i=inputs.length;
while(i--){
   if(inputs[i].type=='text'){
      // this is a text input
      // if you can establish whether it's the one you want to focus then:
      if(youWantToFocusOnThisInput){
         inputs[i].focus();
         break;
      }
   }
}
</script>

Can you post a link to the page which you want to load and set the focus on?

Martin.

schalkgreyling · Jul 16, 2015

Good day Warhound,

Will it be possible to set focus on a textbox and input text ? Allmost like auto login?

The page in want to input my login details is listed below- this is step one of two pages i want to auto input information, to automate finding results.

https://trakcarelabwebview.nhls.ac.za/trakcarelab/csp/logon.csp

Thanks in advance

Kind Regards

warwound · Jul 16, 2015

The form on that webpage has an id of 'fSSUser_Logon'.
It has an input field for 'username' and this field has both id and name attributes of 'USERNAME'.
The 'password' input field has both id and name attributes 'PASSWORD'.
The 'logon' button has both id and name attributes 'Logon'.

So you have all the info you need to execute some javascript after the webpage has loaded - javascript that will populate the form fields and auto submit the form:

B4X:

Sub Process_Globals

End Sub

Sub Globals
	Dim LogonUrl As String="https://trakcarelabwebview.nhls.ac.za/trakcarelab/csp/logon.csp"
	Dim WebView1 As WebView
	Dim WebViewExtras1 As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)
	WebView1.Initialize("WebView1")
	Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
	WebViewExtras1.Initialize(WebView1)
	Dim WebChromeClient1 As DefaultWebChromeClient
	WebChromeClient1.Initialize("WebChromeClient1")
	WebViewExtras1.SetWebChromeClient(WebChromeClient1)
	WebView1.LoadUrl(LogonUrl)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebChromeClient1_ConsoleMessage(ConsoleMessage1 As ConsoleMessage) As Boolean
	Log("WebChromeClient1_ConsoleMessage")
	Log(ConsoleMessage1.Message)
End Sub

Sub WebView1_PageFinished (Url As String)
	Log("WebView1_PageFinished")
	If Url=LogonUrl Then
		Dim Javascript As StringBuilder
		Javascript.Initialize
		Javascript.Append("document.forms.fSSUser_Logon.USERNAME.value='foo';")
		Javascript.Append("document.forms.fSSUser_Logon.PASSWORD.value='bar';")
		'	uncomment next line to auto submit the logon form
		'	be careful - if logon fails then the webpage will be reloaded
		'	and an infinite loop of failed logons is likely
		'	Javascript.Append("document.forms.fSSUser_Logon.submit();")
		WebViewExtras1.ExecuteJavascript(Javascript.ToString)
		Log("Form updated")
	End If
End Sub

Tested and works here on my Moto G (Lollipop).
Though the failed logon causes the webpage to be reloaded and the logon fails (an infinite loop begins).
Change the username and password to valid values and you should see it working.

WebViewExtras2 can be downloaded from: http://b4a.martinpearman.co.uk/webviewextras/WebViewExtras2-v2.10.zip

Some of the b4a code is not really required but i've added it to help debug any problems.
The DefaultWebChromeClient and it's ConsoleMessage callback sub are not required but would show any javascript errors which would help debugging.

Martin.

How set Focus to an Editbox when loaded website into Webview?

awama

Active Member

warwound

Expert

awama

Active Member

warwound

Expert

schalkgreyling

Member

warwound

Expert

Attachments

Similar Threads