Live editing of users input

Question

Is it possible to auto insert characters into an EditText as the user inputs data?

I.e. if the user is entering a long number such as 123456789012, is it possible for this number to appear as he is typing it in the edit text box, but with a dash every 4th character?

So as you type the number above you would see it being entered in the EditText box but would look like this: 1234-5678-9012.

Currently I have an app where you can enter a long number and then press a button and it inserts the dashes for you, but I'm curious if it could be done as you type?

Many thanks for any help.

Solution 1

By tagging android, I think you are discussing about android editText, is so you can do it by listening the TextChangedListener,

EDITED: for backspace

editText.addTextChangedListener(new TextWatcher() {
            int len=0;
            @Override
            public void afterTextChanged(Editable s) { 
                String str = editText.getText().toString(); 
                 if(str.length()==4&& len <str.length()){//len check for backspace 
                    editText.append("-");
                }
            }

            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {

             String str = editText.getText().toString(); 
              len = str.length();
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {  
            }


        }); 

Solution 2

to solve this issue, i write a class "AutoAddTextWatcher" :

1. Auto insert text into EditText.
2. insert text into EditText at positions you are setted.
3. delete text in EditText at positions you are setted, when text length bigger than 1.

code snippet :

mEditText_birthday.addTextChangedListener(new AutoAddTextWatcher(mEditText_birthday,
            "/",
            new TextWatcher() {},
            4, 6));

AutoAddTextWatcher class

import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;


/**
 * Created by henry.chuang on 2016/5/12.
 */
public class AutoAddTextWatcher implements TextWatcher {
    private CharSequence mBeforeTextChanged;
    private TextWatcher mTextWatcher;
    private int[] mArray_pos;
    private EditText mEditText;
    private String mAppentText;

    public AutoAddTextWatcher(EditText editText, String appendText, int... position){
        this.mEditText = editText;
        this.mAppentText = appendText;
        this.mArray_pos = position.clone();
    }
    public AutoAddTextWatcher(EditText editText, String appendText, TextWatcher textWatcher, int... position){
        this(editText, appendText, position);
        this.mTextWatcher = textWatcher;
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        mBeforeTextChanged = s.toString();

        if(mTextWatcher != null)
            mTextWatcher.beforeTextChanged(s, start, count, after);

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        for (int i = 0; i < mArray_pos.length; i++) {
            if(((mBeforeTextChanged.length() - mAppentText.length() * i) == (mArray_pos[i] - 1) &&
                    (s.length() - mAppentText.length() * i) == mArray_pos[i])){
                mEditText.append(mAppentText);

                break;
            }

            if(((mBeforeTextChanged.length() - mAppentText.length() * i) == mArray_pos[i] &&
                    (s.length() - mAppentText.length() * i) == (mArray_pos[i] + 1))){
                int idx_start = mArray_pos[i] + mAppentText.length() * i;
                int idx_end = Math.min(idx_start + mAppentText.length(), s.length());

                String sub = mEditText.getText().toString().substring(idx_start,  idx_end);

                if(!sub.equals(mAppentText)){
                    mEditText.getText().insert(s.length() - 1, mAppentText);
                }

                break;
            }

            if(mAppentText.length() > 1 &&
                    (mBeforeTextChanged.length() - mAppentText.length() * i) == (mArray_pos[i] + mAppentText.length()) &&
                    (s.length() - mAppentText.length() * i) == (mArray_pos[i] + mAppentText.length() - 1)){
                int idx_start = mArray_pos[i] + mAppentText.length() * i;
                int idx_end = Math.min(idx_start + mAppentText.length(), s.length());

                mEditText.getText().delete(idx_start, idx_end);

                break;
            }

        }

        if(mTextWatcher != null)
            mTextWatcher.onTextChanged(s, start, before, count);

    }

    @Override
    public void afterTextChanged(Editable s) {
        if(mTextWatcher != null)
            mTextWatcher.afterTextChanged(s);

    }

}

complete demo source :
https://github.com/henrychuangtw/AutoInsertEditText

Comments

[Entropy1024]

Great. Thank you very much for the answer.

[Ali Hidim]

Do handle deletions as well - the example given may make it impossible to backspace after typing 4 characters (as deleting the dash will immediately add another back in).

[Labeeb Panampullan]

@Nick , I have edited it for backspace , So its not impossible

[Mr.G]

@LabeebP i have tried to use it. but if i press back space . - wont remove also. also once a dash preview in the edittext the cursur will be moved in to forward

[Figen Güngör]

This doesnt add dashes to my edittext. What might be the reason?

[josher932]

The same that @Figen Güngör for me

[Kevin Bright]

Wow dude! You are a genius! Thank you so much for this... I have tried SO MANY solutions, but nothing worked right. I needed to get it formatted like this: 12-345-67. Every other solution always had weird things happen when you deleted and then tried to re-enter. Your solutions works PERFECTLY! One thing to note though, for your class to work properly, you need to set the input type in the XML file to android:inputType="phone" I tried initially with android:inputType="number" and it didn't work. I checked your github page and saw you used phone, and that now works. Great job!

[Kevin Bright]

Here's my implementation: enterUserID.addTextChangedListener(new AutoAddTextWatcher(enterUserID, "-", 2, 5));

[HenryChuang]

@KevinBright Thanks your encouragement and suggestion, I will try it.

[Kevin Bright]

No, thank you! I can't believe how hard this is to do properly in Android!

[sham.y]

@HenryChuang: your code was super. previously I implemented my own way by struggling a lot. But your code will help people definitely. If I want to implement copy paste listener to your code, how can we achieve that.

[HenryChuang]

@sham.y copy paste listener? copy all text on edittext?

[sham.y]

@HenryChuang : yes, if user copied text and pasted in edit text.

[Sai Durga]

Hi,Im using this class,But one issue we are observed is when user bring the cursor to back of the string then the position of delimiter is missing as per the requirement.Can you please suggest me is there any solution for this.

[Vishal G. Gohel]

It was appending only for one time how should i append multiple time ?

[mehmett]

I changed my EditText input type to number and I gave digits to "0123456789-" and works perfectly. Thanks for the answer.