Continuous OTP input with EditText

问题

Here is 4 EditText for input a numeric password. I want it to be like, If first EditText is filled by 1 number then, focus should goes to next EditText and should also work same in reverse manner. So that user can keep entering password from Left most and can also erase same way from Right most.

Can someone suggest what can be the best approach to proceed?

回答1:

You can use the library Android PinView / OtpView

or you can use addTextChangedListener to add a TextWatcher which is called whenever this EditTextView's text changes then you can call View.requestFocus() on the next EditText to focus it

回答2:

If you are familiar with RxJava, then this might be easiest way to fulfill your need. Here is a sample of Kotlin code

RxTextView.textChanges(edtOtp1).filter { it.length == 1 }.subscribe { edtOtp2.requestFocus() }
RxTextView.textChanges(edtOtp2).filter { it.length == 1 }.subscribe { edtOtp3.requestFocus() }
RxTextView.textChanges(edtOtp3).filter { it.length == 1 }.subscribe { edtOtp4.requestFocus() }
RxTextView.textChanges(edtOtp4).filter { it.length == 1 }.subscribe { context.hideKeyboard(view) }

The same way you can write for reverse also. While length is zero focus to the previous Edittext.

回答3:

You can do this

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <EditText
        android:id="@+id/otpET1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:maxLength="1"
        android:gravity="center"
        android:textSize="20sp"/>

    <EditText
        android:id="@+id/otpET2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:maxLength="1"
        android:gravity="center"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/otpET3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:maxLength="1"
        android:gravity="center"
        android:textSize="20sp"/>

    <EditText
        android:id="@+id/otpET4"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:maxLength="1"
        android:gravity="center"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/otpET5"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:maxLength="1"
        android:gravity="center"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/otpET6"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:inputType="number"
        android:gravity="center"
        android:maxLength="1"
        android:textSize="20sp"/>
</LinearLayout>

In activity

EditText[] otpETs = new EditText[6];


otpETs[0] = findViewById(R.id.otpET1);
otpETs[1] = findViewById(R.id.otpET2);
otpETs[2] = findViewById(R.id.otpET3);
otpETs[3] = findViewById(R.id.otpET4);
otpETs[4] = findViewById(R.id.otpET5);
otpETs[5] = findViewById(R.id.otpET6);

@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    int keyCode = event.getKeyCode();
    if (keyCode == 7 || keyCode == 8 ||
            keyCode == 9 || keyCode == 10 ||
            keyCode == 11 || keyCode == 12 ||
            keyCode == 13 || keyCode == 14 ||
            keyCode == 15 || keyCode == 16 ||
            keyCode == 67) {
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            if (keyCode == KEYCODE_DEL) {
                int index = checkWhoHasFocus();
                if (index != 123) {
                    if (Helpers.rS(otpETs[index]).equals("")) {
                        if (index != 0) {
                            otpETs[index - 1].requestFocus();
                        }
                    } else {
                        return super.dispatchKeyEvent(event);
                    }
                }
            } else {
                int index = checkWhoHasFocus();
                if (index != 123) {
                    if (Helpers.rS(otpETs[index]).equals("")) {
                        return super.dispatchKeyEvent(event);
                    } else {
                        if (index != 5) {
                            otpETs[index + 1].requestFocus();
                        }
                    }
                }
                return super.dispatchKeyEvent(event);
            }
        }
    } else {
        return super.dispatchKeyEvent(event);
    }
    return true;
}

private int checkWhoHasFocus() {
    for (int i = 0; i < otpETs.length; i++) {
        EditText tempET = otpETs[i];
        if (tempET.hasFocus()) {
            return i;
        }
    }
    return 123;
}

This is just to get string from editTexts

public class Helpers {

    public static String rS(EditText editText) {
        return editText.getText().toString().trim();
    }
}

Finally,

String code = Helpers.rS(otpETs[0]) + Helpers.rS(otpETs[1]) + 
Helpers.rS(otpETs[2]) + Helpers.rS(otpETs[3]) + Helpers.rS(otpETs[4]) 
+ Helpers.rS(otpETs[5]);

or just use a simple for/while loop.

来源：https://stackoverflow.com/questions/48754046/continuous-otp-input-with-edittext