BriskBard, CEF4Delphi, WebView4Delphi, WebUI4Delphi and WebUI4CSharp

Hi all,
i have a custom browser that opens a specific web page that has forms and edit fields in it,
how do i check if there is a text field in the web page?

The idea is to automatically bring up an on-screen keyboard when there is an edit field.

I currently cannot open the keyboard by monitoring the cursor and showing the keyboard when it changes to typing cursor because CEF4 isn't really letting it when using touch screen.
When i press the text field on touch screen i simply cannot get the typing cursor in order to be able to show the keyboard.

Hi,

You need to know if the element under the mouse pointer when you click the left button is an INPUT or a TEXTAREA.

You would use the TBufferPanel.OnClick event to call a custom JavaScript function that checks if document.elementFromPoint(x, y) is an INPUT or a TEXTAREA. Then send back the results to Delphi.

That "custom JavaScript function" is a JavaScript extension. Use the JSRTTIExtension demo to know how to use JS extensions and send the results to Delphi.

Thanks Salvador!

After doing some checks, i have however made a conclusion of using cursor which is more reliable and does not require running Java script.
The problem is unfortunately with chromium not having focus

What i normally do is,
monitor the cursor and show the keyboard when the cursor type is typing. Which is very logical and good way to show and hide the keyboard.
I have tested with all of the demos in the CEF package and none seems to keep their focus.
What i am saying is,
when i press a text field in the webpage that is shown in the browser, browser component gains the focus after pressing 2-5 times not by pressing one time. Once the focus is gained, the keyboard shows up and it works.

So,
the problem is,
how to gain the focus when the textfield is pressed once?

I have made several tests,
if i use the component with out using a TBufferPanel, it is impossible to gain focus by pressing the text fields. It only seems to work when there is the TBufferPanel which is also not complete because it requires as mentioned 2-5 times pressing in order to gain the focus.

If you find any solution,
please do let me know!

Many thanks.

CEF behaves very differently in "normal" mode and OSR mode. Only a few demos use the OSR mode and comparisons between those demos and the rest can lead to confusion.

An application using CEF in OSR mode notifies TChromium about form, mouse and keyboard events or windows messages. In addition to that, some TChromium events only work in OSR mode.

If you need to know when the browser has focus use the TChromium.OnGotFocus event.

However, the best solution is using JavaScript to know if the element under the mouse pointer when you click the left button is an INPUT or a TEXTAREA.

Sorry, I forgot that the mouse cursor can be set to CT_IBEAM (text edit cursor) when the pointer is over simple text. Using only the cursorType parameter in TChromium.OnCursorChange will make your app show the virtual keyboard too many times.

Back to this,
"Sorry, I forgot that the mouse cursor can be set to CT_IBEAM (text edit cursor) when the pointer is over simple text. Using only the cursorType parameter in TChromium.OnCursorChange will make your app show the virtual keyboard too many times."

Are you saying that i should use "OnCursorChange" of TChromium in order to show and hide the keyboard?
if yes,
can you please share a sample of how to?
I am already monitoring the cursor...

My app shouldn't show the keyboard too many times as you are mentioning here,
"Using only the cursorType parameter in TChromium.OnCursorChange will make your app show the virtual keyboard too many times."
The idea is to show the keyboard only when the cursor is typing cursor ELSE it is not showing it.

I have done such keyboards way too many times, it works like charm with TWebBrowser but the problem with TWebBrowser is that it is a complete crap because it doesn't really support any decent HTML5 content, not even with emulation because it emulates only the IE 11 which is already stone age thanks to the Microsoft.

My only option is Chromium embedded. Without you, we wouldn't have that either.

Hitman wrote: Mon Aug 20, 2018 3:10 pm "Sorry, I forgot that the mouse cursor can be set to CT_IBEAM (text edit cursor) when the pointer is over simple text. Using only the cursorType parameter in TChromium.OnCursorChange will make your app show the virtual keyboard too many times."
Are you saying that i should use "OnCursorChange" of TChromium in order to show and hide the keyboard?

I meant the opposite. I previously suggested that you could use that event but I was terribly wrong.
Do NOT use TChromium.OnCursorChange to show or hide the virtual keyboard.

I just uploaded a new demo called KioskOSRDemo that uses the GlobalCEFApp.OnFocusedNodeChanged event to show or hide the keyboard.
It's not a perfect solution but it's a relatively good replacement without using JavaScript. If your Kiosk doesn't have external controls that can be focused then it should work fine.

KioskOSRDemo is a full screen app that can be used as a template for more complex Kiosk apps.

Remember that this demo can be closed pressing the ESC key.

Many thanks!!
"I just uploaded a new demo called KioskOSRDemo that uses the GlobalCEFApp.OnFocusedNodeChanged event to show or hide the keyboard."
Is this the only change?

I could probably implement it to my existed project with out recreating?

Hitman wrote: Mon Aug 20, 2018 6:15 pm Many thanks!!
"I just uploaded a new demo called KioskOSRDemo that uses the GlobalCEFApp.OnFocusedNodeChanged event to show or hide the keyboard."
Is this the only change?
I could probably implement it to my existed project with out recreating?

I only modified the form properties to make be a full screen app and added a few code lines to close the form when ESC is pressed.

The rest of the changes are needed to use GlobalCEFApp.OnFocusedNodeChanged :

• Send a message to the browser process from the render process in GlobalCEFApp.OnFocusedNodeChanged when the "node" is an INPUT or TEXTAREA.
• Receive that process message in the browser process inside the TChromium.OnProcessMessageReceived event and send a custom windows message to the form because you need to show and hide the virtual keyboard in the main thread.
• To avoid a memory leak you also need to create a procedure to create GlobalCEFApp in a PAS file. This demo uses the CreateGlobalCEFApp procedure which is defined in uKioskOSRBrowser.pas. The DPR calls this procedure instead of creating GlobalCEFApp directly. For more info about that leak read this https://github.com/salvadordf/CEF4Delphi/issues/89

Thanks Salvador!
It is probably better to use the demo and modify as necessary.

Hi Salvador,
here is some feedback for the Kiosk Browser demo.

Please accept my apologies for not being clear,
the on-screen keyboard of Delphi is not useable, as far as i can tell, nobody is using it because it is very bad, cannot be modified visually and its buttons cannot be adjusted or changed.

So,
what i am doing is,
i am using my own custom build keyboard which can be a form inside my project which will be SHOW/HIDE or an external .EXE file which can be executed when the cursor is typing cursor and terminated when cursor is something else.

My problem is still with the Chromium component which simply does not have focus while using touchscreen.
What i need is,
when i press the textfield with my finger, the cursor is supposed to be change to typing cursor and when the cursor has changed, BOOM! keyboard is shown.

Now,
to make it more clear,
when i use mouse (i mean actual mouse) and when i click the text field, my keyboard is shown and it works like charm while using your OSRDEMO as test (also my own browser which is based on OSRDEMO).
However,
when the touchscreen is used instead of actual mouse, the keyboard is shown after pressing the text field like 2-5 times which means, Chromium component is somehow not able to gain the focus when using touchscreen.

I believe our goal should be to find out why the browser is not gaining the focus while using touchscreen.

Can you please clear me up,
what is the typing cursor of Chromium?
what is the name of it?
I will do some more tests after this.