Numeric TextFields in SwiftUI
Vložit
- čas přidán 1. 06. 2024
- In this video I am going to show you how I handle textfields for iOS and iPADOS in SwiftUI when I want to restrict entry to either integer or decimal values only.
There are some real issues with using TextFields in SwiftUI when you want to limit the entry to either an integer or a decimal value. As we work through this project I will show you what those issues are and how I overcome them with a Toolbar button, a view Modifier and UIKit trick.
If you want to support my work, you can buy me a coffee :)
ko-fi.com/stewartlynch
Table of Contents:
0:00 Introduction
0:42 Dismiss Keyboard with FocusState
4:53 NumbersOnly ViewModifier
12:45 ClearTextField
Starter Project Files:
www.createchsol.com/StarterPr...
Completed Project:
github.com/StewartLynch/Numer...
References mentioned in video:
Custom View Modifiers
• Custom View Modifiers ...
Other References:
Stewart Lynch's CZcams Channel:
/ @stewartlynch
Stewart Lynch on Twitter:
/ stewartlynch
Stewart Lynch on LinkedIn
/ stewartlynch - Věda a technologie
Excellent and useful lesson... like always. Thank you Stewart. Happy New Year! 🎄
Stewart, you make the most informative videos for swiftui I have ever seen. Thanks!
Thank you Samuel. I appreciate the feedback
Stewart, your channel is one of the most informative on CZcams about SwiftUI. I'm so glad when I search something and see your content in the results 👍
Love this! I need this all the time, and your solution is SO MUCH more elegant than mine! Thanks for another great video!
Thank you for sharing knowledge, Stewart!
Awesome! Thank you so much. Great tips
Great technique! I’m going to use that tomorrow! I have attempted my own but it’s not quite as clean as yours.
One thing I wanted was to swap the clear button to leading and the numbers to trailing alignment. More like most calculators display.
Great video as always. I do use a similar setup in my app 👍
this is great can't wait to see more of your videos.
Nice one Steward. I actually has to build my own numberpad and used some custom logic for numbers to appear from right to left and placeholder to be 0.00
Thank you very much. A very clean a pro solution.
Stewart thanks for your videos. You are an incredible teacher
Very unique topic!!
Thanks Stewart. Excellent Video with a perfect solution for my keyboard problem.
Thanks Stewart, excellent solution. I found that TextField("Credit Limit", value: $supplierCreditLimit, format: .number) can works. Even you can type more chars than numbers the format to number will takes care of those chars, same if the user adds more than one decimal point.
Great tip!
14:19 thanks, very nice enhancement.
As stated before this video was very helpful.
With your video as a stepping stone, I was able to solve an issue I had for while regarding the display of decimal and currency numbers.
I expanded your code to limit the number of digits before and after the decimal separator. I also prevented the entry of the decimal separator or a zero as the first character.
🙏🏼🙏🏼🙏🏼
Check out my SwiftUI workshop and the How Much application. I do that there too but differently from this tutorial
Great video!
Awesome job! Helped me out a ton, thank you so much! 🔥⛺
Glad to hear it!
How is it that anytime I need to figure out something, Stewart is there? Very helpful again, thanks. Time to buy you another coffee :)
Glad to help!
Glad to help!
Thank you - your video just saved me hours of time.
Glad it helped
Very helpful. I always learn something new.
The textfield clear button solution is great. I created my own solution but it didn't work to my satisfaction when using textfields in lists or forms.
Thank you Stewart. 👍🏼👍🏼👍🏼
Glad it helped!
Awesome video. I have tried to 'engineer' my own solution, but it was not as slick as your version.
I often like to restrict my users to entering amounts, and so would like to limit the input to a maximum of 2 decimal digits. (I know that some countries have 3 decimals in their amounts - but I am conveniently ignoring those at the moment). I guess that I could just adjust the Combine section in your code?
Thanks for all your videos, I do learn a lot from your work. I have the following question please; first I am new to Swiftui, I using a Zstack to build a word game where I create a 'clock-like' (1-12), I did had a textfield so that the user can enter 12 characters and it must goes as follows, on 'the clock' 1=A, 2=B, 3=C and so on. But I want to the text updates while user enters the characters in the textfield, I play around with the .onreceive to be able to collect only the last character enetered and place the character at it position, where can I find anything wrt this please, thanks Pierre
Hi Stewart. Thanks for the great video. I have one question. When i run the simulator, comma is the decimap separator but I want period to be the seperator. I change the region to US and number format but still comma appears as a decimal seperator. Please help me solve this problem.
I spent like over a day online and stack overflow to determine on how to format a textfield to accept decimals with two digits. This is awesome. You rescued me. This is the only video that shows this. Thank you for putting this out. There is one more thing I would like to ask. If my textfield is for currency, how do I make $ symbol appear at the beginning of the number that I enter. Or is this something that I need to do when I query swiftdata to get data and format the textview to show the dollar sign. Please guide me if you can. Thank you.
Unfortunately this method will not work for that as it will strip out the currency symbol.
Very well ❤❤👏👏👏👏👏
Brilliant
Fantastic! I will use this in my Stepper Motor Calculator app. I'm a newbie and the code for the iPad is very complicated to me. I'll just restrict my app to an iPhone. It's just for my own personal use. Do you know of a way to install it on my iPhone without it disappearing after a day or so? Thank you.
Get a developer account. They are free now until you want to publish to the App Store.
Very helpful. I'm curious, why doesn't Apple incorporate this functionality when using text fields and numbers?
That would be a question for Apple.
@@StewartLynch I agree, thanks for another great instructional video!
does FocusedFiled not work on macOS? because the error says its out of scope
Is there a way to have the commas be added while entering a numeric value? Also, check when the user is entering in a decimal number larger than 100? I currently have an alert for this based on what the value being entered in is but feels annoying in using the app.
This might be possible., but not likely with this method.
8:17 This is a very complex matter, while mathematics( and most data level storage ) uses . as decimal separator and , as separator for different values; let's call this `and` in which makes perfect sense for 2D coordinates and tuples, however for n-tuples `and` may be a bad word. Presenting data is quite simple with this in mind as data stored ( 59.10101010, 10.10101010 ) could be presented in any flavor. Parsing according to locale takes for granted that the device is personal, in which may make sense for 95% of users.
Resolved. It works perfectly,
I followed everything to the letter, iOS 16.4 and Xcode don't complain and the keyboards come up but with two exceptions 1) it would not compile with the spacer() on the toolbar, something about format space and 2) the decimal keypad will still allow additional decimals for some reason. I have run this in simulator and on my iPhone 13 Pro. If you have any suggestions for me other than give up coding, please let me know. Maybe someone else has had this situation come up.
Have you downloaded the completed project from the link in the description. I just did and it compiled and ran fine so I suggest you do that and compare your code. I am running on Simulator and iPhone 13 Pro too. You can also email me your project as a zip file and I will take a look, but it would likely stick more if you can compare to the completed project and find your own error.
@@StewartLynch My textfield is not $intNumberString and $decNumberString but rather $inputText2 and $inputText3 which are user input and saved with a button. So I think I need to create additional or change @State private var intNumberString = "" accordingly. Thank you for responding by the way. I am an old retired Bell System power engineer NOT a coder, my fascination with coding started with Kernigan and Ritchie and the creation of Unix and I should have jumped in at that point, haha. I will let you know if I can get it to work correctly.
Of course $inputText2 and $inputText3 were already initialized so I put those in place of $intNumberString and $decNumberString and it works PERFECT. You are the man and thank you again.
Great news Vaughn. Glad it worked out for you.
Thanks!
Wow Vaughn. Thank you so much for this. Let me know if I can be of any assistance.
@@StewartLynch Maybe you can. Do you have a simple method of resigning a datePicker field? The way mine works now I have to click outside the datefields to resign them, I have two in a row so it's not very user friendly. I have tried a bunch of different tips but nothing has worked in my situation.
I do have something that might work for you if you are just displaying the Date and not the time. If you email me at slynch@createchsol.com we can pursue this and I can send you want I have.
How do you make it auto input commas for the thousands, millions, billions denotations to make the numbers easier to read.
You use number formatter
Great Video, removing pain from managing keyboard and text fields with numerals.
I discovered that Locale.current.decimalSeparator has disappeared from Ventura.
Rather you cannot find it anymore in the system prefs panes.
On my French version of Ventura 13.1 I have the right separator "," but Locale.current.decimalSeparator persists to present the current one as ".".
Can this be used in TextField(“amount”, value: $amount, format: .currency(code:Locale.current.currency ?? “USD”))
I tried to change @Binding var text: String to @Binding var num: Double
And other changes such as String(num).first() then String(num).dropLast() etc
It works but unlike your example, the textfield still shows every character that is typed in. Even though all the characters except “1234567890.” are cleared after the Return key is hit, I am still trying to figure out the way to make it behaves like the way your example behaves, i.e any character being not one of those “1234567890.” will not show.
I very much appreciate any suggestions. Thank you in advance.
No. A textfield is bound to a String, whereas the format is bound to a decimal value. I don't quite understand what your issues are.