Giter VIP home page Giter VIP logo

otpfieldview's Introduction

OTPFieldView

One Time Password View for iOS. Built in Swift 5

Swift 5 compatible Platform iOS License: MIT

Preview

demo demo demo demo demo

Installation

CocoaPods

Add the following line to your Podfile:

pod 'OTPFieldView'

Then run the following in the same directory as your Podfile:

pod install

Usage

Code

@IBOutlet var otpTextFieldView: OTPFieldView!

func setupOtpView(){
        self.otpTextFieldView.fieldsCount = 5
        self.otpTextFieldView.fieldBorderWidth = 2
        self.otpTextFieldView.defaultBorderColor = UIColor.black
        self.otpTextFieldView.filledBorderColor = UIColor.green
        self.otpTextFieldView.cursorColor = UIColor.red
        self.otpTextFieldView.displayType = .underlinedBottom
        self.otpTextFieldView.fieldSize = 40
        self.otpTextFieldView.separatorSpace = 8
        self.otpTextFieldView.shouldAllowIntermediateEditing = false
        self.otpTextFieldView.delegate = self
        self.otpTextFieldView.initializeUI()
    }

The becomeFirstResponderAtIndex property sets the pinField at the specified index as the first responder. The isContentTypeOneTimeCode property sets the contentType of the first pinField to .oneTimeCode to leverage the iOS 12 feature where the passcode is directly fetched from the messages.

Styles

enum DisplayType: Int {
    case circular
    case roundedCorner
    case square
    case diamond
    case underlinedBottom
}

Delegate Methods

extension OtpViewController: OTPFieldViewDelegate {
    func hasEnteredAllOTP(hasEnteredAll hasEntered: Bool) -> Bool {
        print("Has entered all OTP? \(hasEntered)")
        return false
    }
    
    func shouldBecomeFirstResponderForOTP(otpTextFieldIndex index: Int) -> Bool {
        return true
    }
    
    func enteredOTP(otp otpString: String) {
        print("OTPString: \(otpString)")
    }
}
  • hasEnteredAllOTP(): Returns true when all text Fields are full.
  • shouldBecomeFirstResponderForOTP(): Show keyboard automatically.
  • enteredOTP(): Get entered pin.

Properties

  • .displayType: Display type for Text Field.

  • .fieldsCount: Length of OTP.

  • .otpInputType: Input type for Text Field : numeric, alphabet, alphaNumeric.

  • .fieldFont: Font for Text Field.

  • .secureEntry: Shows • instead of text.

  • .hideEnteredText: Hides the text.

  • .requireCursor: Shows/Hides cursor.

  • .cursorColor: Color for Cursor.

  • .fieldSize: Size of Text Field.

  • .separatorSpace: Space between Text Fields.

  • .fieldBorderWidth: Border width for Text Fields.

  • .shouldAllowIntermediateEditing: Allow to edit from middle.

  • .defaultBackgroundColor: Empty text field background color.

  • .filledBackgroundColor: Filled text field background color.

  • .defaultBorderColor: Empty text field border color.

  • .filledBorderColor: Filled text field border color.

  • .errorBorderColor: Error text field border color.

  • .delegate: delegate.

License

OTPFieldView is available under the MIT license. See LICENSE for details.

otpfieldview's People

Contributors

root-vb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

otpfieldview's Issues

Pod is not installing using terminal

I am trying to install OTPFieldView in my iOS project using terminal but it gives an error that says

[!] CocoaPods could not find compatible versions for pod "OTPFieldView":
In Podfile:
OTPFieldView

Specs satisfying the OTPFieldView dependency were found, but they required a higher minimum deployment target.

How can I install OTPFieldView?

Keyboard return command

Hi,
is it possible to customize the keyboard in order to make the return button NOT to add an empty char but to hide the keyboard?
It should be also very helpful to access to the updated string which I am tapping. Is there a var or a method which can show me the updated value?
Thanks for the support.

Mark as error functionality is not there

I have a use case where we send OTP to server. User can manually edit the OTP in OTPFieldView. If server gives message OTP is wrong, we need to show OTP Field view in red border. With current implementation it is not possible. Is there any way to do that?

Border Color

I am changing the border color and it is working fine in simulator but in iPhone it is not getting the border color. There is border color on simulator but on iPhone border color just takes white color.

SwiftUI Implementation

I'm trying to implement OTPFieldView Delegation with SwiftUI but no luck.
Is there anyone who successfully implemented this repo?

My test:

import SwiftUI
import OTPFieldView

struct OTP: UIViewRepresentable{
    
    func makeUIView(context: Context) -> OTPFieldView{
        
        let otp = OTPFieldView()
        otp.fieldsCount = 6
        otp.displayType = .underlinedBottom
        otp.separatorSpace = 8
        otp.initializeUI()
        return otp
    }
    
    func updateUIView(_ uiView: OTPFieldView, context: Context){
        
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    internal class Coordinator: OTPFieldViewDelegate{
        
        func shouldBecomeFirstResponderForOTP(otpTextFieldIndex index: Int) -> Bool {
            return true
        }
        
        func enteredOTP(otp: String) {
            print(otp)
        }
        
        func hasEnteredAllOTP(hasEnteredAll: Bool) -> Bool {
            return false
        }
        
        var parent: OTP
        
        init(_ parent: OTP){
            self.parent = parent
        }
    }
}

Issue in installing using pods

[!] CocoaPods could not find compatible versions for pod "OTPFieldView":
In Podfile:
OTPFieldView

Specs satisfying the OTPFieldView dependency were found, but they required a higher minimum deployment target.
nestap@Nestaps-MacBook-Pro nestap_

Please assist with demo

Please assist with a suitable demo of this, tried following the guide on your site but it is not working at all.

Textcolor Change

I am trying to change the textColor of the textfield. but not able to do that

copy paste OTP not working

Hello
I am using your code in one of the project. And in my project one of the requirement is to copy paste OTP. So If User copy OTP from anywhere and paste the code, it will fill all the OTP filed views with pasted OTP. Right now what happen is that, if I copied 123456 and paste, the whole OTP is pasted in first textfield only. But I want to paste only single character in each of textfield.

So please can anyone give me the solution for that.
Waiting for the response.
Thanks in advance.

How to stop copy and paste in textfeilds

hello there,

i am using your code for a project and right now i'm getting stuck on how to close copy and paste in textfield and another thing is when i insert four value in text(i'm using only four fields) and then i'm clicking on third text and remove the value of that text then i want to click on fourth text but the text field is enable so please check it.

i'm waiting for your response.
Thank you

Crash when load the view

   // Forcefully try to make first otp field as first responder
    (viewWithTag(1) as? OTPTextField)?.becomeFirstResponder()
    
    On this line app being crash .
    Please let me know how could i fix it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.