iOS Question Close Keyboard

lePeKa · Jun 22, 2022

Hi,

I do have a TextField in my B4XView. Once the user presses "Enter" on the keyboard, the keyboard closes - just as expected. The Views/UI Elements that have been covered, are visible again.

But is it also possible to hide the keyboard, once the users "taps" (Clicks/Touches) outside the TextField?

I have tried to catch the "Click" and "Touch" Event of the page itself, but not even got a Log. So I assume I hadn't got that right. Is there some workaround/trick? I had fired up the search, but none of the results, I read and tested, have been successful.
Is there somewhere a minimal example? I have tested the "Coordinates" example, but it behaves weird (very slow / unresponsive) and does not close the keyboard as well.

I have considered replacing it with a B4XFloatTextField, but haven't worked with it yet.

Thank you!

moore_it · Jun 23, 2022

Hi try this,

a) create a global variable

B4X:

Public gTf As TextField

b) initialize the textfield

B4X:

Private  Sub InitKeyboard(tf As TextField)
    Globals.gTf = tf
    ' img with mini keyboard
    Dim img As ImageView
    img.Initialize("EKB")
    img.Height = 32
    img.Width = 32
    img.ContentMode = img.MODE_CENTER
    img.Bitmap = LoadBitmap(File.DirAssets,"keyboard.png")
    Dim no As NativeObject = tf
    no.SetField("inputAccessoryView", img)
End Sub

c) catch the event

B4X:

Private Sub EKB_Click
    Globals.gTf.ResignFocus
End Sub

tufanv · Jun 22, 2022

Page_touch even should close the keyboard with page.resignfocus. Maybe something else is covering the page like a panel so that you have to use panel_touch instead of page_touch ? just guessing. It would be nice to see a small example

moore_it · Jun 23, 2022

Hi try this,

a) create a global variable

B4X:

Public gTf As TextField

b) initialize the textfield

B4X:

Private  Sub InitKeyboard(tf As TextField)
    Globals.gTf = tf
    ' img with mini keyboard
    Dim img As ImageView
    img.Initialize("EKB")
    img.Height = 32
    img.Width = 32
    img.ContentMode = img.MODE_CENTER
    img.Bitmap = LoadBitmap(File.DirAssets,"keyboard.png")
    Dim no As NativeObject = tf
    no.SetField("inputAccessoryView", img)
End Sub

c) catch the event

B4X:

Private Sub EKB_Click
    Globals.gTf.ResignFocus
End Sub

Num3 · Jun 23, 2022

Add these lines where needed to close the keyboard

B4X:

    Dim ime As IME ' Hide the keyboard
    ime.Initialize("blabla")
    ime.HideKeyboard

Alexander Stolte · Jun 23, 2022

Num3 said:
Add these lines where needed to close the keyboard

We are in B4I there is no IME.

Num3 · Jun 23, 2022

Alexander Stolte said:
We are in B4I there is no IME.

I am sorry, i did not notice this post was on the B4i thread
Gzzzz I need more coffee ?

lePeKa · Jun 23, 2022

tufanv said:
Page_touch even should close the keyboard with page.resignfocus. Maybe something else is covering the page like a panel so that you have to use panel_touch instead of page_touch ? just guessing. It would be nice to see a small example

Thank you. I can generate a Touch-Event for the page. For a standard B4XPage-Project in B4i it creates an empty sub.

B4X:

Private Sub Page1_Touch(Action As Int, X As Float, Y As Float)
    
End Sub

However, I struggle with referring to that page.
Is it "me" or B4XPage.Get... or is it "MainPage" (when referring to the default Designer Layout)?

moore_it said:

Hi try this,

a) create a global variable

B4X:

Public gTf As TextField

b) initialize the textfield

B4X:

Private  Sub InitKeyboard(tf As TextField)
    Globals.gTf = tf
    ' img with mini keyboard
    Dim img As ImageView
    img.Initialize("EKB")
    img.Height = 32
    img.Width = 32
    img.ContentMode = img.MODE_CENTER
    img.Bitmap = LoadBitmap(File.DirAssets,"keyboard.png")
    Dim no As NativeObject = tf
    no.SetField("inputAccessoryView", img)
End Sub

c) catch the event

B4X:

Private Sub EKB_Click
    Globals.gTf.ResignFocus
End Sub

Thank you as well.
Here also: I struggle with the placement and naming of the code. Define the global Textfield in "main" or "b4xpage".

Why do I have to have an ImageView with a Keyboard.png?

moore_it · Jun 23, 2022

lePeKa · Jun 23, 2022

moore_it said:
View attachment 130713

Thank you. I'm really trying to get all the bits and pieces together.

lePeKa · Jun 23, 2022

Here you'll find a working example (works on my machine ?), based on @moore_it s great example/help. Thank you so much for that!

Usage:
Once you click/tap/touch INTO the TextField, the keyboard opens AND additionally - the small picture/keyboard icon shows up.

Now you can do the following:
Use the "Enter" button on the keyboard (my TextField was configured that way in the Designer), or
Tap the small keyboard-icon.

Very intuitive - my users will like it!

moore_it · Jun 23, 2022

It's very useful in case of the numpad keyboard

lePeKa · Jun 23, 2022

moore_it said:
It's very useful in case of the numpad keyboard

Indeed. I can already see the benefit.
Do you have to do this for every page, or can this be handled globally?

moore_it · Jun 23, 2022

as you like ... but attention on event

iOS Question Close Keyboard

lePeKa

Member

moore_it

tufanv

Expert

moore_it

Well-Known Member

Num3

Active Member

Alexander Stolte

Expert

Num3

Active Member

lePeKa

Member

moore_it

Well-Known Member

lePeKa

Member

lePeKa

Member

Attachments

moore_it

Well-Known Member

lePeKa

Member

moore_it

Well-Known Member

Similar Threads

iOS Question Close Keyboard

Member

Expert

Well-Known Member

Active Member

Expert

Active Member

Member

Well-Known Member

Member

Member

Attachments

Well-Known Member

Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency