newTextField with 'touch' listener

Audio and Graphics
#1

Hi guys,

I am trying to include a ‘touch’ listener for a newTextField(). Main reason is to detect movement (e.g. user is scrolling, and does not actually want to trigger the newTextField). I am using Graphics 2.0 (build 2013.2114 )

I have read these previous items :

http://forums.coronalabs.com/topic/38990-drag-nativenewtexfield/?hl=%2Bnewtextfield+%2Blistener#entry202341

http://coronalabs.com/blog/2011/09/24/tutorial-how-to-drag-objects/

The problem is when I add a ‘touch’ listener to the newTextField, it never gets triggered. I have tested it on Mac Simulator and Apple iOS Simulator, and this ‘touch’ listener does not respond at all. A ‘userInput’ listener works fine.

Sample Code :

local field1 = native.newTextField( 50, 100, 100, 35 ) field1.align = "center" field1.size = 32 field1.text = "Hello, world!" field1:setTextColor( 255, 128, 0 ) -- touch listener function function touchListener ( event ) print( "Touch phase : " , event.phase ) if event.phase == "began" then self.markX = self.x -- store x location of object self.markY = self.y -- store y location of object elseif event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = x, y -- move object based on calculations above end return true end -- make 'myObject' listen for touch events field1:addEventListener( "touch", touchListener ) 

Please advise if I am missing something.

Thanks

#2

I don’t think that newTextFields actually support the touch/tap events. Can you explain your situation a bit more? Are you trying to detect scrolling of the text inside a multi-line newTextField or are you scrolling something which has the field in front of it?

Usually, the best way to handle new text fields in conjunction with normal Corona content is to provide the text field at the last possible moment and hide it asap. Simply use Corona graphics to simulate the appearance of the text box, etc.

#3

I am actually trying to detect scrolling event when the user touches/moves within a newTextField. This is a storyboard page with a scrollView, and inside this scrollView contains a lot of newTextFields (something like form filling). It is hard to scroll when there are a lot of newTextFields, as any touch event on them will only show the keyboard ( when I want to actually scroll).

Creating graphics to simulate a newTextField is quite cumbersome and will not look like an actual input text field. I created it before, and I still prefer the look of the native object.

ps : Hiding the newTextField object using “isVisible or hasBackground” wont work, as it will still be there and above the graphics. Touching it will still trigger the keyboard. You need to removeSelf() the native object to totally ‘hide’ it.

#4

I don’t think you’ll be able to intercept touch events within a text field, I’m afraid. Definitely worth a feature request though.

#5

Thanks. Based on this forum-post ( http://forums.coronalabs.com/topic/38990-drag-nativenewtexfield/?hl=%2Bnewtextfield+%2Blistener#entry202341 ) , some members mentioned it is possible.

Anyone with experience in this ?

#6

Hi @yosu,

I haven’t tested this recently, but are you getting a “touch” response (not a “tap” response) on the scroll view when you touch and move around over the text box? Or does the text box completely block all touch response to anything behind it? It would be expected that the text box captures the tap event (since that would be to enter text into it), but if the touch event is occurring on the view it’s contained in, implementing scrolling should be possible.

Brent

#7

Dear Brent,

I tried ‘touch’ and also ‘tap’ response listener, but none of them seem to respond/trigger at all. The textField() seems to only detect ‘userInput’ type of response only.

I also tested on the sample codes (graphics v2.0), changing the listener from “userInput” to “touch”, and it does not get triggered on Android device. I briefly tested the textBox() too, and it exhibits the same behaviour.

Yes, the textField() blocks the items behind it too (which is the scrollView). Unable to access the objects behind textField().

Please advise. Thanks!

#8

Hi @yosu,

What happens if you set the “isEditable” property to “false”? Does that allow touches to go through?

Brent

#9

Dear Brent, Here are my test results on an Android device. Do note that the ‘isEditable’ feature on newTextField() is not stated in the documents. It is only in the newTextBox()

 

#10

Hi @yosu,

Unfortunately, I think this would be tricky to workaround. It’s possible (but I haven’t tested it) that you could use a Runtime touch listener (on the entire screen) and try to sense touch movement on that. However, the text fields may even “shield” this (moved phases over their region) since they reside atop normal display objects.

Best regards,

Brent

#11

Dear Brent,

Thanks for the info. I am already using runtime listeners to track the page (scrollView) movement. It is mainly used to ‘hide’ and ‘show’ the text fields when it goes out of the scrollView. Sad to say, it cannot track it when the user touches the textField, as it is ‘always above’ the graphics.

Is this considered a bug, as ‘touch’ & ‘tap’ listeners does not work on the newTextField() ? If so, I will submit one.

Thanks

#12

Hi @yosu,

No, this isn’t a bug… the engineers confirmed yesterday that native objects intercept touch, by design. Personally, from a user standpoint, I would expect the fields to capture/respond if I tapped on them… but perhaps that’s just me. I realize that if you have a large amount of the screen filled with these (many rows of input fields) it will make scrolling difficult or impossible. Have you considered using visual “placeholders” that are not actually native fields until that placeholder is tapped on, then it shows a native input field in that location? Just a thought…

Brent

#13

Dear Brent,

I did consider using newRect() look-alike as replacements, then show the native text field once the user touches it. But my client prefers to have the nativeField visible, instead of a rect because the looks is slightly different (different people with their own favourites).

It would be quite hard to replicate a real native field look, as the mask and color has to be right.

You mentioned that ‘native objects intercept touch by design’. Does this mean that ‘touch’ listener should be usable ? Cause in my test, only ‘userInput’ listener is intercepted.

Thanks

#14

Hi @yosu,

To clarify, I meant that it intercepts touch events in general (at least this is what the engineers tell me, although if anybody has found otherwise, I’d be curious to hear more).

I agree that it would be difficult, but not necessarily impossible, to “fake” inactive text fields using regular display objects. In iOS7, they are white rounded rectangles, which may not be too tricky. But then, you’d have to style for Android too, if you’re going cross-platform, so it becomes a finicky process.

Brent

#15

I don’t think that newTextFields actually support the touch/tap events. Can you explain your situation a bit more? Are you trying to detect scrolling of the text inside a multi-line newTextField or are you scrolling something which has the field in front of it?

Usually, the best way to handle new text fields in conjunction with normal Corona content is to provide the text field at the last possible moment and hide it asap. Simply use Corona graphics to simulate the appearance of the text box, etc.

#16

I am actually trying to detect scrolling event when the user touches/moves within a newTextField. This is a storyboard page with a scrollView, and inside this scrollView contains a lot of newTextFields (something like form filling). It is hard to scroll when there are a lot of newTextFields, as any touch event on them will only show the keyboard ( when I want to actually scroll).

Creating graphics to simulate a newTextField is quite cumbersome and will not look like an actual input text field. I created it before, and I still prefer the look of the native object.

ps : Hiding the newTextField object using “isVisible or hasBackground” wont work, as it will still be there and above the graphics. Touching it will still trigger the keyboard. You need to removeSelf() the native object to totally ‘hide’ it.

#17

I don’t think you’ll be able to intercept touch events within a text field, I’m afraid. Definitely worth a feature request though.

#18

Thanks. Based on this forum-post ( http://forums.coronalabs.com/topic/38990-drag-nativenewtexfield/?hl=%2Bnewtextfield+%2Blistener#entry202341 ) , some members mentioned it is possible.

Anyone with experience in this ?

#19

Hi @yosu,

I haven’t tested this recently, but are you getting a “touch” response (not a “tap” response) on the scroll view when you touch and move around over the text box? Or does the text box completely block all touch response to anything behind it? It would be expected that the text box captures the tap event (since that would be to enter text into it), but if the touch event is occurring on the view it’s contained in, implementing scrolling should be possible.

Brent

#20

Dear Brent,

I tried ‘touch’ and also ‘tap’ response listener, but none of them seem to respond/trigger at all. The textField() seems to only detect ‘userInput’ type of response only.

I also tested on the sample codes (graphics v2.0), changing the listener from “userInput” to “touch”, and it does not get triggered on Android device. I briefly tested the textBox() too, and it exhibits the same behaviour.

Yes, the textField() blocks the items behind it too (which is the scrollView). Unable to access the objects behind textField().

Please advise. Thanks!