I am working on a PWA application for an Android 11 device using Chrome as the browser. The application has a textbox. When I tap an empty space outside of the textbox it regains focus and pulls the keyboard up automatically. The desired behavior would be to only show the keyboard when the textbox is tapped. I believe I can call a function from a javascript file that hides the keyboard when the textbox gains focus, but I am wondering if there is another way to go about this. Would you be able to provide some advice?
It seems the file size limit is to small for a basic zip folder compressed by windows because of the size of the wisej.framework.dll. Windows wants to compress it to roughly 4.3mb the forum only allows 3.9mb. I attempted to upload a 7zip file but it seems it is forbidden. For this reason I have attached a zip file that is missing the wisej.framework.dll from the bin folder.
Hi David,
Just to clarify this issue, the focus and keyboard remaining visible for the TextBox (input) control is standard behavior on iOS. The default way to hide the keyboard is to click another focusable element. The behavior can be reproduced here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test
Since you need a custom solution for managing the focus of the TextBox, you’re probably on the right track with using the custom JavaScript, but you’ll probably want to take a look at calling Eval() within a specific control’s context rather than using Application.Eval().
https://docs.wisej.com/api/wisej.web/general/control#eval-javascript
You could use something like the following to set read-only on the client:
this.textBox1.Eval("this.setReadOnly(true);");
or
this.textBox1.Call("setReadOnly", true);
It can also be helpful to use the debugger; keyword in JavaScript to trigger a breakpoint, ie.
this.textBox1.Eval("this.setReadOnly(true);debugger;");
In this case, using the this keyword within the string represents the client-side JavaScript control’s context. If it’s called within a button on the server, then it’s the client-side button instance. If it’s called within Application, it’s the window object.
My suggestion would be to use this approach within an inherited TextBox control (FocusManagedTextBox) and call the JavaScript function to remove or set the focus whenever you need.
If you attach a small project showing what you have we can take a look.
Best regards,
Levie
A few more notes:
The initial project you sent over uses the PWA template, which is great, but be careful when using it as it can cause unintended caching of scripts using the service worker. You can always unregister it using Dev Tools.
When using Control.Eval() the control must be initialized on the client. If you use Eval() within a Form’s “Load” event handler, the child controls of the Form are probably not rendered yet. You can use the ControlCreated event to detect when the client-side control has been created.
HTH,
Levie
So far I have had limited success by running this code on the touchstart or tap event for whatever control I need it to run on:
Dim jsCode As Object =
”
let elements = document.getElementsByName(“”tbScan””);
let element = elements[1];
function HideVirtualKeyboard() {
element.readOnly = true;
element.blur();
setTimeout(function() {
element.focus();
element.readOnly = false;
}, 300);
}
HideVirtualKeyboard();
”
Try
Application.Call(“eval”, jsCode)
Catch ex As Exception
Debug.WriteLine(“Errors tried to kill the metal but they FAILED!”)
End Try
This disables the keyboard and keeps focus on the textbox but requires me to add this to the touchstart or tap event of every possible control that needs this behavior. The other issue with this work around is that the keyboard appears for a split second before disappearing. I am still working on another solution but this is what I have done so far,
Hi David,
thanks, we could reproduce the issue and are checking how to fix this.
As a temporary workaround you might want to add another focusable element to switch the focus to.
We´ll keep you updated.
Best regards
Frank
I am using wisej 3.2.2.
I have attached the file here.
Hi David,
what Wisej.NET version are you using? IIRC this was fixed in Wisej.NET 3.2
If it still fails, please attach a sample without the OBJ and BIN subdirectories.
Thanks in advance,
Frank
Please login first to submit.