wkwebview forms autocomplete

I've got a basic form for taking name and email - in Safari and Mobile Safari this successfully uses the autocomplete freature to suggest name and email and pops them into the relevant form input fields.


However when I show this form within a wkwebview the autocomplete features are not working at all.


I cannot find any documentation on wkwebview that says it doesn't manage autocomplete ... and in xCode I can't see any settings that would be used to toggle this on/off.


Any suggestions would be most welcome - I can't help feeling this is likely a really basic issue and I'm missing something super-simple!


Thanks

Alasdair

Replies

You would have to re-code all of that yourself - and I mean all of it. You would essentially have to have your own storage for autofill data, passwords, sites, etc. You can't have access to system data or user data.


What you can do instead is use SFSafariViewController. That puts Safari inside your app. You won't have access to any of the autofill data, but it should give you a genuine, Safari view inside your app.

I am also having the same issue, anyone found the solution?

I did custom implement that auto-fill feature, would like to share

use it with

let data = AutoFillData(fName: "Jhon")
webView.evaluateJavaScript(data.createJSString(), completionHandler: nil)

It searches dom elements with name and id

struct AutoFillData {

    var fName: String?

    var lName: String?

    var email: String?

    var phone: String?

    var shipAddress: String?

    var shipCity: String?

    var shipState: String?

    var shipCountry: String?

    var zip: String?



    enum KeyNames: String, CaseIterable {

        case first_name, customerFirstName,

             last_name, customerLastName,

             name,

             email, customerEmail,

             phone, alternatePhone, phoneNumber, phoneNumber2 = "phone-number",

             shipAddress = "ship-address", addressLine1, addressLine2,

             shipCity = "ship-city", city,

             shipState = "ship-state", state,

             shipZip = "ship-zip", zip, pincode,

             shipCountry = "ship-country", country

    }



    func getData(keyName: KeyNames) -> String? {

        switch keyName {

        case .first_name, .customerFirstName: return fName

        case .last_name, .customerLastName: return lName

        case .name: return [fName, lName].compactMap { $0 }.joined(separator: " ")

        case .email, .customerEmail: return email

        case .phone, .alternatePhone, .phoneNumber, .phoneNumber2: return phone

        case .shipAddress, .addressLine1, .addressLine2: return shipAddress

        case .shipCity, .city: return shipCity

        case .shipState, .state: return shipState

        case .shipCountry, .country: return shipCountry

        case .zip, .shipZip, .pincode: return zip

        }

    }



    func createJSString() -> String {

        var str = ""

        KeyNames.allCases.forEach {

            let value = getData(keyName: $0)?.trimmingCharacters(in: .whitespacesAndNewlines) ?? ""

            if !value.isEmpty {

                str.append("""

                var e = document.getElementsByName('\($0.rawValue)')[0];

                if (e == null) {

                    e = document.getElementById('\($0.rawValue)');

                }

                if (e != null) {

                    e.value = '\(value)';

                }

                """)

            }

        }

        return str

    }

}
  • This code should be added in didFinish delegate method then you can access the webpage/form elements using the above code and update your values. Thank you @chanonly123 for saving my time

Add a Comment