I add a native.newTextField() in widget.newScrollView(), when i scroll the view, the other ui component, eg. Text, is masked normally if it’s outside the view; but for the TextField, it can not be masked if it’s outside the view.
Is it a bug, or anything I am missing to set up ?
native elements are not part of the Corona rendering hierarchy. They are also ON TOP of all other elements.
So, this is not a bug and you aren’t missing anything. That is simply the way they work.
So is there any workaround to let some text input component to be masked if it’s out of scroll view?
For example, any other ui component I could use for inputing text instead of by using native.newTextField() ?
@bodos
No you can’t mask native elements. That is the wrong idea.
For Native Text Fields
What you can do is calculate when part of a native text field is ‘off screen’ and hide the field.
If the field is determined to be off-screen, then set isVisible to false. Set it to true when it comes on screen.
Depending on the scenario, this may be non-trivial. The functions you are about for these calculations are:
Anyone have this code handy for bodos? I have it somewhere, but may not have time to dig for a while.
I always put native text fields off screen and mirror the result to a local display.newText field, to circumvent these limitations.
Dont see why that wouldnt work in a scrollView or tableView.
for my own needs i just add a typical “_” in the end.
suppose you could use any character really, as well as editing and positioning.
I also use a default text when the textField string is empty (my current project just says “Search”)
i think I understood your question but not 100% sure so please explain if my answer dont make sense 
I meant that, but I also wondered. How do you enable tapping between characters of existing text to insert new letters?
I see what you mean.
Thats a textField use which I havent had the need for yet.
Pressing the mirrored text field to try and get the exact cursor position is gonna be tricky since we cannot analyze the text in the bitmap afaik. Using a monospaced font might work though, as the position could be calculated.
Once that first edit position has been established, handling the editing in the off screen textField should work.
Editing text from the first or last position should be easy enough though.
Perhaps some of these could be useful:
object:setSelection()
event.startPosition
I am sure though that you have already gone through all of these potential methods and parameters so doubt I can bring anything to the table at this point.
Interesting issue for which it would be great if a solution could be found
anaqim
Dang! I was hoping you had a solution so I could stop thinking about this. It’s on my list of wish I had time to figure that out things…
Having said all that, your solution is perfectly reasonable. I’m glad it works for you and I hope it helps @bobdos.
Cheers,
Ed
i wonder if i didnt just pop a method of doing this after all, at least in theory.
Every time the user add a letter in edit mode, the mirror text is of course updated. Now what if the text was stored in an array together with the mirror objects width? That could then be used for lookups finding the right edit point when touching the mirrored text to start editing?
Performance might not be stellar but i doubt the user would notice it.
Food for thought 
Morning Ed,
Couldn’t let this go so whipped up the followin code on how to detect initial cursor position in a native text field through a mirrored text display object, as well as editing
If is by far not complete as there is more code needed for keeping the cursor visible during edit, keyboard code for move the cursor through the string, control flags etc, but the concept is absolutely doable, fast and could maybe serve as a basic idea for developing a full script for this issue, that seem to plague quite a few developers.
[lua] local f={} f.dcw=display.actualContentWidth f.dch=display.actualContentHeight f.nntf=native.newTextField f.dnt=display.newText f.font=native.systemFont f.dnr=display.newRect f.key=native.setKeyboardFocus f.slen=string.len f.ssub=string.sub local ntext,mtext,surface,pos -- native text field local function ninput(event) if event.phase=="began" then elseif event.phase=="editing" then mtext.text=ntext.text elseif event.phase=="submitted" or event.phase=="ended" then end end ntext=f.nntf(f.dcw\*0.5,f.dch\*0.2,250,30) ntext:addEventListener("userInput",ninput) -- display text field mtext=f.dnt({text="Search",x=36,y=f.dch\*0.4,font=f.font,fontSize=20,align="left"}) mtext.anchorX=0 mtext:setFillColor(0.8) -- touch surface local function sinput(event) f.key(ntext) local touchx=event.x-surface.x if f.slen(ntext.text)==0 then mtext.text="\_" else -- detect initial position for i=1,f.slen(ntext.text) do mtext.text=f.ssub(ntext.text,1,i) if touchx\<mtext.width then pos=i-1 ntext:setSelection(pos,pos) mtext.text=f.ssub(ntext.text,1,pos).."\_"..f.ssub(ntext.text,pos+1,#ntext.text) break end end end end surface=f.dnr(36,mtext.y,250,30 surface.anchorX=0 surface.isVisible=false surface.isHitTestable=true surface:addEventListener("tap",sinput) ntext.text="please edit me" mtext.text=ntext.text [/lua]I am also having problems with native fields in a business app that we are developing.
I need to have several entry fields on the screen and I am using native.newTextField and native.newTextBox.
I have not tried the solution of having a display.newText mirroring the native fields, but I am doubting that the user will be able to enter and edit (select/copy/cut) text as he can in a native.newTextField.
So I need to find a solution to move the textFields up and out of the screen and I do this by inserting them into a display.newGroup() and then moving this Group() up by using
transition.moveTo( UIGroupOfFields, {y=-200, time=1000 } )
This works fine when the Group() has other display fields, but the native fields are on top of my status bar and on top of the screen title etc. that I want to have on the top of the screen.
I read the solution that I should try to hide the fields when they are above the screen (or enter into the top area of the screen), but is there an event that I can add to each object to let it detect it itself, or do I need to break my transition up into X different transitions (e.g. each moving the y-value 20 pixels) and at the end of each one I hide the fields that are about to reach the top of the screen?
Oh well,
I found a way, but it would take some experimenting to get it to work properly…
First I have added all the native fields to a table (entryFieldTable)
And as I start the transition I can loop through the table and add a transition.fadeOut with the appropriate time so that it disappears as it is about to hit the top of the screen.
transition.moveTo( UIGroupOfFields, {y=-200, time=1000 } ) local theObject = entryFieldTable[1] transition.fadeOut( theObject, { time=500 } )
Then I can reverse this process and do a transition.fadeIn which takes longer then the transition.moveTo time
It looks kind of good on the first native object, and I guess I can find an algorithm that takes into account the height of the top part of the screen, the height of the native fields, the distance between them and the field order so that I can transition the fields on the top of screen faster/slower than the ones further down depending on wether I am moving the group of fields up or down.
But mostly I am wishing for entry fields that behave as display fields…
(I also had to add a timer.performWithDelay to move the native fields out of the way so that they are not in front of the buttons that I have on the top of the screen…)
Hi there,
Are you saying you are able to fade in/out native fields on alpha?
Which platform are you getting this to work for in that case?
Cant test right now but I am pretty sure this cant be done.
Can hope though 
I am not sure what you mean by “on alpha”, but the routine works on the Simulator and on my iPad
here is a little movie that I made on from the screen of the iPad to show you what it looks like:
https://www.dropbox.com/s/upouxk8hi6ardhn/hideNativeFields.MOV?dl=0
and here is the code:
First I create the native fields with a code like this:
fieldNumber = fieldNumber + 1 theCustomerLastNameField = native.newTextField(10, (firstFieldY-SpaceBetweenFields)+(fieldNumber\*SpaceBetweenFields), fieldWidth, fieldHeight ) theCustomerLastNameField.font = native.newFont( \_G.useFont, 18 ) theCustomerLastNameField.inputType = "default"; theCustomerLastNameField.placeholder = translations["theCustomerLastNameFieldPlaceholder"][language] theCustomerLastNameField.anchorX,theCustomerLastNameField.anchorY = 0,0 theCustomerLastNameField.helptext = "Enter last name" theCustomerLastNameField.fieldNumber = fieldNumber theCustomerFirstNameField.isEditable = true UIGroupOfFields:insert(theCustomerLastNameField)
Then I add the fields to a table and add and eventListener
(the table is defined at the top of the code to make it available for the other routines)
entryFieldTable[1] = theCustomerFirstNameField entryFieldTable[1].id = 1 entryFieldTable[2] = theCustomerLastNameField entryFieldTable[2].id = 2 (...) theCustomerFirstNameField:addEventListener( "userInput", textListener ) theCustomerLastNameField:addEventListener( "userInput", textListener )
In the TextListener I call the code to move the fields
local function textListener(event) if (event.phase == "began") then moveFields(event.target.fieldNumber) elseif ( event.phase == "ended" )then end end
and finally, here is the code that moves and fades the objects in and out
local function moveFields(theIdNumber) local function moveAwaySoShallNotInterfereWithButtons(hide) if hide then local function doMove() -- Move it out of the way so that I can click on the button on the -- top of the screen and not hit the native field for i = 1,4 do local theObject = entryFieldTable[i] theObject.x = totalWidth + 1000. end end timer.performWithDelay( 2000, doMove) else for i = 1,4 do local theObject = entryFieldTable[i] theObject.x = 10 end end end if theIdNumber ~= nil then if tonumber(theIdNumber) \>= 8 then -- Move the top 4 fields out of the way if UIGroupOfFields.y ~= -200 then transition.moveTo( UIGroupOfFields, {y=-200, time=1000, onComplete=moveAwaySoShallNotInterfereWithButtons(true) } ) for i = 1,4 do print("Move item: "..i) local theObject = entryFieldTable[i] local transitionTime = 250\*i transition.fadeOut( theObject, { time= transitionTime } ) end end else -- move the top 4 fields back again if UIGroupOfFields.y ~= topSide then moveAwaySoShallNotInterfereWithButtons(false) transition.moveTo( UIGroupOfFields, {y=topSide, time=1000 } ) for i = 4,1,-1 do local theObject = entryFieldTable[i] transition.fadeIn( theObject, { time=1500 } ) end end end else print("no idnumber") end return true endHi,
By alpha I ment that transition.fadeIn manipulates the alpha value of the object, and afaik, that cant be done on native controls.
Looks like you are doing something new or something clever that makes this happen.
A quick test here showed me that I can set the alpha on the textField on my android but not in the simulator.
Gonna look into this and let you know my findings.
Looks to be working on your video though so
And of course I should add support for swipe events.
Does anyone have a good one that moves and slows the objects down as they have moved the appropriate distance ?
For that you’ll probably want to look into the scrollView or tableView widgets, probably the latter for you list.
I use them both and they are working well.
Hi again,
Tried to use transition.fadeIn on a native TextField and in the simulator (on windows 10!) alpha fading does not work at all.
On my android device it works to some extent but its not entirely consistent once I start to use the field. Have seen some occasional flickers.
I can only assume you are coding on a mac, which could perhaps explain why it works for you.
Anyone else got some knowledge to share on the subject??