How do you implement a decimal keyboard?

Question

Commented out in my view struct, I have the keyboard I want to limit the user to when filling out the long/lat text fields. There are other threads that are close to this question, but I do not understand what they are referencing in their answers.

How do you limit the user to the decimal + punctuation keyboard?

//
//  ContentView.swift
//  Geo Calculator App
//  App that calculates distance between two long/lat values
//
//  Created on 9/25/21.
//

import SwiftUI

struct ContentView: View {
    @State var longitude1 = ""
    @State var latitude1 = ""
    @State var longitude2 = ""
    @State var latitude2 = ""
    //self.LongLatTextField.keyboardType = UIKeyboardType.decimalPad
    var body: some View {
        VStack {

            Spacer()
            
            Text("Geo Calculator App")
                .font(.system(size: 24, weight: .bold))
                .foregroundColor(.black)
            
            Text("Calculate distances between long/lat values")
                .font(.system(size: 16, weight: .light))
                .foregroundColor(.gray)
            
            
            HStack {
            HStack {
                TextField("Longitude A", text: $longitude1)
                    .foregroundColor(.blue)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .background(Color.white)
                .cornerRadius(9)
            
            HStack {
                TextField("Latitude A", text: $latitude1)
                    .foregroundColor(.blue)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .background(Color.white)
                .cornerRadius(9)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .cornerRadius(9)
                .padding(.horizontal, 5)
            
            HStack {
            HStack {
                TextField("Longitude B", text: $longitude2)
                    .foregroundColor(.blue)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .background(Color.white)
                .cornerRadius(9)
            
            HStack {
                TextField("Latitude B", text: $latitude2)
                    .foregroundColor(.blue)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .background(Color.white)
                .cornerRadius(9)
            }.frame(height: 60)
                .padding(.horizontal, 15)
                .cornerRadius(9)
                .padding(.horizontal, 5)
            
            //Put label here to display output on button click

            Spacer()
            
            Button(action: {}) {
                Text("Calculate")
                    .foregroundColor(.white)
                    .font(.system(size: 24, weight: .medium))
            }.frame(maxWidth: .infinity)
                .padding(.vertical, 15)
                .background(Color.green.opacity(10))
                .cornerRadius(30)
                .padding(.horizontal, 70)
            
            Spacer()

            
        }.background(Color.white)
            .edgesIgnoringSafeArea(.all)
    }
}
//------------------------------------------------------
//Distance calculations, sources below
//geodatasource.com/developers/swift
//sisense.com/blog/latitude-longitude-distance-calculation-explained
func degreeToRadian(deg:Double) -> Double {
    return deg * Double.pi / 180
}

func radianToDegree(rad:Double) -> Double {
    return rad * 180 / Double.pi
}

func distance(lat1:Double, lon1:Double, lat2:Double, lon2:Double) -> Double {
    let theta = lon1 - lon2
    var dist = sin(degreeToRadian(deg: lat1)) * sin(degreeToRadian(deg: lat2)) + cos(degreeToRadian(deg: lat1)) * cos(degreeToRadian(deg: lat2)) * cos(degreeToRadian(deg: theta))
    dist = acos(dist)
    dist = radianToDegree(rad: dist)
    dist = dist * 60 * 1.1515 * 1.609344
    
    return dist
}
//------------------------------------------------------

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

you could use this approach: https://gist.github.com/daniloc/254db4eb8e009acc2409edc2da2f18ac or this one: https://stackoverflow.com/questions/58733003/swiftui-how-to-create-textfield-that-only-accepts-numbers — workingdog support Ukraine, Sep 27 '21 at 03:21

score 1 · Answer 1 · answered Sep 27 '21 at 07:58

1

You can just use the keyboard modifier on your Textfield:

.keyboardType(.decimalPad)

Documentation: https://developer.apple.com/documentation/uikit/uikeyboardtype

answered Sep 27 '21 at 07:58

Florian S

552
3
15

How do you implement a decimal keyboard?

1 Answers1