iOS Question Close Keyboard

lePeKa

Member
Licensed User
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!
 
Solution
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

Expert
Licensed User
Longtime User
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
 
Upvote 0

moore_it

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
Solution

Num3

Active Member
Licensed User
Longtime User
Add these lines where needed to close the keyboard

B4X:
    Dim ime As IME ' Hide the keyboard
    ime.Initialize("blabla")
    ime.HideKeyboard
 
Upvote 0

lePeKa

Member
Licensed User
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)?

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?
 
Upvote 0

moore_it

Well-Known Member
Licensed User
Longtime User
keyboard.png
 
Upvote 0

lePeKa

Member
Licensed User
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.

keyboard01.png


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!
 

Attachments

  • TextAndKeyboard-Test.zip
    3.9 KB · Views: 74
Upvote 0
Top