实现在矩形框中输入文字,可以显示剩余字数的功能

如下图:

要实现上面的功能,需要做到三点:

1、实现矩形框布局

思路就是矩形框作为整个布局的一个background,在drawable中创建一个shap.xml样式文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
 
    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />
    <!-- 设置圆角矩形 -->
    <!--<corners android:radius="3dp" />-->
 
    <stroke
        android:width="1px"
        android:color="#000" />
 
    <solid android:color="#ffff" />
 
</shape>

在布局文件中设置  android:background="@drawable/shap"

然后将editText和Textview按照要求布局到该矩形区域中

2、隐藏editText的下划线

默认情况下,editText中输入文字后,下面都会有下划线,可以使用  android:background="@null"

将其下划线隐藏。

3、计算剩余字数

这个问题可以通过对editText控件调用addTextChangedListener()方法实现监听

final int maxNum = 500;     
final TextView leftNum = (TextView) findViewById(R.id.leftNum);
EditText ed = (EditText) findViewById(R.id.nikeName);
 
ed.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) {
        leftNum.setText("剩余字数:"+ (maxNum-s.length()));
    }
});          

  

 

时间: 2024-10-05 17:37:11

实现在矩形框中输入文字,可以显示剩余字数的功能的相关文章

JavaScript实现在页面上的文本框中输入小写字母自动变为大写字母

<script language="javascript" type="text/javascript"> $(function () { $("input[type=text]").keyup(function () { $(this).val($(this).val().toUpperCase()); }); }); </script> $("input[type=text]") 处可为文本框ID,

JavaScript实现在文本框中输入空格时自动填写某个值

<script language="javascript" type="text/javascript"> var txtText4 = "#" + '<%= new DynamicControl(this, "Text4").ClientID%>'; $(function () { $(txtText4).keyup(function (e) { if (e.which == 32) $(this).

实现文本框中输入限制字数的效果

实现文本框中输入限制字数的效果: <!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>采销商品基本信息</title> </head>

Input Text关键字——模拟向一个输入框中输入文字内容

Input Text关键字:模拟向一个输入框中输入文字内容. 该关键字接受2个参数 [ locator | text ]:locator参数指的是定位界面元素的方式,text参数指的是需要输入的内容. ==================================================================================== 示例:打开百度页面,输入“robot framework”,这里采用id的方式来定位界面输入框元素. Open Browser 

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

利用jQuery实现输入文字弹幕显示动画特效

特效描述:利用jQuery实现 输入文字 弹幕显示 动画特效,利用jQuery实现输入文字弹幕显示动画特效 代码结构 引入JS <script src="js/jquery-3.0.0.min.js"></script> HTML代码 <div class="barrager"><div><span>我的女神</span></div><div><span>温婉

对文本框中输入的内容放大显示和格式化

在最近做的项目中,发现用户在输入手机号.身份证或者银行卡这些重要的数据的时候,文本框显示的文字不是非常大,也不是非常明显的显示给用户. 往往这些重要数据用户都需要核对好几次,在确保正确无误的时候才敢点击保存,这样总会浪费一点时间,对用户的体验也不是非常友好,如果我们能在用户输入框的上面对输入的内容进行放大.颜色突出并且按照不同的分隔显示,是不是这样更能便于用户快速的核实数据呢. 于是自己利用业务时间就动手封装了一个小插件: 第一步:创建一个样式表sytle.css 1 @charset "utf

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

安装wampserver之后,浏览器中输入localhost页面显示IIS7解决办法

1.首先保证wamp正常启动 wampserver图标为绿色才为正常启动,如果为橘色说明端口(默认为80)被占用:可以点击图标,然后点Apache->Service->测试80端口,来验证端口是否被占用. 如果占用则去Apache中的配置文件httpd.conf中去修改端口,ctrl+F搜索Listen,将Listen的值改为8080. 2.重启wamp,图标变绿色,将离线状态切换成在线状态 3.正确输入地址 在火狐浏览器中输入localhost:8080