Live character count for EditText

I was wondering what the best way to do a live character count of an edit-text box is in Android. I was looking at this but I couldn't seem to make any sense of it.

To describe the problem, I have an EditText and I'm trying to limit the characters to 150. I can do this with an input filter, however I want to show right below the text box the number of characters a user has entered(Almost like stack overflow is doing right now).

If someone could write a small snippet of example code or point me in the right direction I'd appreciate it a lot.

86173 次浏览

您可以使用 TextWatcher 查看文本何时更改

private TextView mTextView;
private EditText mEditText;
private final TextWatcher mTextEditorWatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}


public void onTextChanged(CharSequence s, int start, int before, int count) {
//This sets a textview to the current length
mTextView.setText(String.valueOf(s.length()));
}


public void afterTextChanged(Editable s) {
}
};

将编辑文本的 TextWatcher 设置为

mEditText.addTextChangedListener(mTextEditorWatcher);

非常简单,按照下面的说明:

= = = = 将它们添加到您的导入中 = = =

import android.text.Editable;
import android.text.TextWatcher;

= = = = = = 定义这个 = = = = = =

private TextView sms_count;

= = = = = = = = = = 内心创造 = = = = = =

sms_count = (TextView) findViewById(R.id.textView2);




final TextWatcher txwatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}


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


sms_count.setText(String.valueOf(s.length()));
}


public void afterTextChanged(Editable s) {
}
};


sms_message.addTextChangedListener(txwatcher);

试试这样做。

与获取 CharSequence.length 相比,这个解决方案可能性能更好。每次在软键盘上点击时,事件都会触发; 因此,如果你点击一个长度,它每次都会计算 CharSequence,如果你开始使用大的 CharSequunces,这个过程可能会变慢。文本更改上的事件侦听器对计数前后进行粘贴。这对于增量和减量值都很有效

@Override
public void beforeTextChanged(CharSequence charSequence, int start, int count, int after) {
int tick = start + after;
if(tick < mMessageMax) {
int remaining = mMessageMax - tick;
((TextView)findViewById(R.id.contact_us_chars)).setText(String.valueOf(remaining));
}
}
    You can use TextWatcher class to see text has changed and how much number of character remains.Here i have set counter of 140 characters.


EditText typeMessageToPost;
TextView number_of_character;
public void onCreate(Bundle savedBundleInstance) {
super.onCreate(savedBundleInstance);
setContentView(R.layout.post_activity);
typeMessageToPost.addTextChangedListener(mTextEditorWatcher);
}
private final TextWatcher mTextEditorWatcher=new TextWatcher() {


@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// TODO Auto-generated method stub


}


@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// TODO Auto-generated method stub


}


@Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub
number_of_character.setText(String.valueOf(140-s.length()));
}
};

我遇到了同样的问题,我尝试了卡梅隆的方法。它工作,但有一个小错误: 如果用户使用复制和粘贴,然后它无法计数字符。所以我建议在文字改动后做,如下:

    private final TextWatcher mTextEditorWatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {


}


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


}


public void afterTextChanged(Editable s) {
//This sets a textview to the current length
mTextView.setText(String.valueOf(s.length()));
}
};

您可以使用 SupportLibrary v23.1中引入的用于 EditText 的 TextInputLayout 文本输入输出布局包装器从 xml 本身执行字符计数

只需用 TextInputLayout 包装您的 EditText,并将 CounterEnable 设置为 true,然后设置 CounterMaxLlength。

<android.support.design.widget.TextInputLayout
android:id="@+id/textContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="20"
>
<EditText
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text Hint"
/>
</android.support.design.widget.TextInputLayout>

你会得到一个物质效果像 这个

You may use 反溢出文本外观 , 反文本外观 to style the counter.

剪辑

来自 Android 文档。

The 编辑文本 class is provided to be used as a child of this layout. Using TextInputEditText allows TextInputLayout greater control over the visual aspects of any text input. An example usage is as so:

     <android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">


<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/form_username"/>


</android.support.design.widget.TextInputLayout>

TextInputLayout < a href = “ https://developer.android.com/reference/android/support/design/widget/TextInputEditText.html”> TextInputEditText

使用 android:maxLength="140"

只需在 XML 文件中的 TextInputLayout中设置以下两行:

app:counterEnabled="true"
app:counterMaxLength="200"

在 xml 中为 edit Text 添加此属性

    android:maxLength="80"

在 java 中添加这个侦听器

  ed_caption.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {


}


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


}


@Override
public void afterTextChanged(Editable s) {
tv_counter.setText(80 - s.toString().length() + "/80");


}
});

You can do it with TextInputLayout and compat libraries with:

app:counterEnabled="true"
app:counterMaxLength="420"

完成:

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="420">


<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="420" />


</android.support.design.widget.TextInputLayout>

试试这个

private TextWatcher textWatcher = new TextWatcher() {
@Override
public void beforeTextChanged(final CharSequence s, final int start, final int count, final int after) {
editText.post(new Runnable() {
@Override
public void run() {
if (length < 100) {
if (count > 0 && after <= 0)/*remove emoij*/ {
length--;
} else if (count > after)/*remove text*/ {
length--;
} else if (count == 0 && after > 1)/*emoij*/ {
++length;
} else if (count == 0 && after == 1)/*Text*/ {
++length;
} else if (count > 0 && after > 1) {
++length;
}
if (s.length() <= 0)
length = 0;
Log.w("MainActivity", " Length: " + length);
} else {
if (count > 0 && after <= 0)/*remove emoij*/ {
length--;
} else if (count > after)/*remove text*/ {
length--;
}
Log.w("MainActivity", " Length: " + length);
}


if (length == 100) {
editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(s.length())});
} else {
editText.setFilters(new InputFilter[]{});
}
}
});
}


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


}


@Override
public void afterTextChanged(Editable s) {


}
};

`

可以将计数器添加到包装在 TextInputLayout 中的 TextInputEditText。正如您在示例中看到的,counterEnabled启用了这个特性,而 counterMaxLengh定义了它的字符数。

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/til_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="50">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/et_title"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.google.android.material.textfield.TextInputLayout>

此解决方案使用 Kotlin并显示剩余字符数。另外,如果当前字符数超过50的限制,文本颜色将变为红色。

Kotlin

private val mTitleTextWatcher = object : TextWatcher {
override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}


override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
if(YOUR_EDIT_TEXT_ID.text.toString().trim().length < 51){
YOUR_CHAR_LEFT_TEXTVIEW_ID.text = (50 - YOUR_EDIT_TEXT_ID.text.toString().trim().length).toString()
YOUR_CHAR_LEFT_TEXTVIEW_ID.setTextColor(Color.BLACK)
}
else{
YOUR_CHAR_LEFT_TEXTVIEW_ID.text = "0"
YOUR_CHAR_LEFT_TEXTVIEW_ID.setTextColor(Color.RED)
}
}


override fun afterTextChanged(s: Editable) {}
}

另外,不要忘记将 TextWatcher添加到您的 EditText

YOUR_EDIT_TEXT_ID.addTextChangedListener(mTitleTextWatcher)

清路;

abstract class CharacterWatcher : TextWatcher {
override fun afterTextChanged(text: Editable?) {
afterCharacterChanged(text?.lastOrNull(), text?.length)
}


override fun beforeTextChanged(text: CharSequence?, start: Int, count: Int, before: Int) {}


override fun onTextChanged(text: CharSequence?, start: Int, before: Int, count: Int) {}


abstract fun afterCharacterChanged(char: Char?, count: Int?)
}






editText.addTextChangedListener(new CharacterWatcher() {
@Override
public void afterCharacterChanged(@Nullable Character character, @Nullable Integer count) {
action()
}
});
     edtmm.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {


}


@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
int data = Integer.parseInt(String.valueOf(s.length()));
if (data == 2) {
edtdd.requestFocus();
} else {
edtmm.requestFocus();
}
}


@Override
public void afterTextChanged(Editable s) {


}
});