`
dss16694
  • 浏览: 148462 次
社区版块
存档分类
最新评论

文本框实现搜索和清空效果

 
阅读更多

前言

  本文实现的效果:文本框输入为空时显示输入的图标;不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字。

 

声明

  欢迎转载,但请保留文章原始出处:)

    博客园:http://www.cnblogs.com

    农民伯伯: http://over140.cnblogs.com 

 

正文

  一、实现效果

    

       

 

  二、实现代码

    监听输入

    /**
     * 动态搜索
     
*/
    
private TextWatcher tbxSearch_TextChanged = new TextWatcher() {

        
//缓存上一次文本框内是否为空
        private boolean isnull = true;

        @Override
        
public void afterTextChanged(Editable s) {
            
if (TextUtils.isEmpty(s)) {
                
if (!isnull) {
                    mSearchView.setCompoundDrawablesWithIntrinsicBounds(
null,
                            
null, mIconSearchDefault, null);
                    isnull 
= true;
                }
            } 
else {
                
if (isnull) {
                    mSearchView.setCompoundDrawablesWithIntrinsicBounds(
null,
                            
null, mIconSearchClear, null);
                    isnull 
= false;
                }
            }
        }

        @Override
        
public void beforeTextChanged(CharSequence s, int start, int count,
                
int after) {
        }

        
/**
         * 随着文本框内容改变动态改变列表内容
         
*/
        @Override
        
public void onTextChanged(CharSequence s, int start, int before,
                
int count) {
            
        }
    };

     触摸事件

    private OnTouchListener txtSearch_OnTouch = new OnTouchListener() {
        @Override
        
public boolean onTouch(View v, MotionEvent event) {
            
switch (event.getAction()) {
            
case MotionEvent.ACTION_UP:
                
int curX = (int) event.getX();
                
if (curX > v.getWidth() - 38
                        
&& !TextUtils.isEmpty(mSearchView.getText())) {
                    mSearchView.setText(
"");
                    
int cacheInputType = mSearchView.getInputType();// backup  the input type
                    mSearchView.setInputType(InputType.TYPE_NULL);// disable soft input
                    mSearchView.onTouchEvent(event);// call native handler
                    mSearchView.setInputType(cacheInputType);// restore input  type
                    return true;// consume touch even
                }
                
break;
            }
            
return false;
        }
    };

    绑定事件

    private Drawable mIconSearchDefault; // 搜索文本框默认图标
    private Drawable mIconSearchClear; // 搜索文本框清除文本内容图标

    @Override
    
protected void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.main)
        
        
final Resources res = getResources();
        mIconSearchDefault 
= res.getDrawable(R.drawable.txt_search_default);
        mIconSearchClear 
= res.getDrawable(R.drawable.txt_search_clear);
        
        mSearchView 
= (EditText) findViewById(R.id.txtSearch);
        mSearchView.addTextChangedListener(tbxSearch_TextChanged);
        mSearchView.setOnTouchListener(txtSearch_OnTouch);
    }

    代码说明:

      1. 为输入框绑定触摸事件(模拟点击事件捕捉)。通过监听点击区域判断是否点击清空图片,如果在该区域并且文本框不为空,则清空文本框。

      2. 为输入框绑定文本改变事件监听,根据内容改变动态设置图标显示。

      3. 维持清空操作后软键盘状态。

 

  三、参考

    1.  how to block virtual keyboard while clicking on edittext in android?

 

  四、小图标下载

      

    (右键另存为即可。)

 

结束 

  活用好每一个控件的属性、方法和事件能实现很多有意思的效果。欢迎大家交流。

 

分享到:
评论

相关推荐

    Android文本框搜索和清空效果实现代码及简要概述

    通过以上代码,我们就实现了Android文本框的搜索和清空效果。用户在输入时会看到清空图标,点击清空图标则会清除文本,同时恢复默认的搜索图标。这个功能在搜索框、过滤输入等场景中非常常见,能显著提升应用的交互...

    JavaFx实现百度文本框的下拉提示功能

    在JavaFX中,实现百度文本框的下拉提示功能,主要涉及到的是文本输入与实时匹配的概念,这在很多用户界面中都有广泛的应用,如搜索引擎、输入法等。这个功能能够提高用户体验,帮助用户快速找到他们可能正在寻找的...

    QT_文本框搜索小程序

    QT_文本框搜索小程序是一个基于QT框架开发的简易应用程序,主要功能是实现关键词搜索和结果展示。这个小程序的核心在于它能够实时响应用户在文本框中输入的关键词,并在已有的字符串数据集中查找包含该关键词的字符...

    jQuery文本框输入文字自动筛选代码

    在本文中,我们将深入探讨如何使用jQuery实现一个文本框输入文字自动筛选的功能,这在许多网页应用中都是一项实用的功能,比如搜索栏、过滤列表等。这个功能的主要目的是提高用户体验,让用户在输入关键字时能够实时...

    C#文本框输入提示功能 下拉框

    "C#文本框输入提示功能 下拉框"这个主题就涉及到如何在文本框中实现智能提示和下拉列表的选择功能。 1. **文本框输入提示功能**: 这个功能通常指的是文本框的水印效果,即当文本框为空时显示一段提示文字,一旦...

    jQuery文本框输入自动提示,类似百度搜索效果

    通过以上步骤,我们就实现了一个基于 jQuery 的文本框输入自动提示功能,它具有类似百度搜索的效果。当然,这只是一个基础版本,实际应用中可能需要考虑更多细节,比如错误处理、延迟加载、分页加载等。同时,随着...

    文本框提示插件

    总的来说,这个"文本框提示插件"是利用JavaScript动态生成和管理提示列表,通过CSS美化视觉效果,并响应用户输入和键盘事件,提供便捷的文本输入辅助。在实际开发中,开发者可以根据需求自定义数据源、匹配规则和...

    js文本框输入内容智能提示效果

    在本例中,我们探讨的是如何实现一个基于JS的文本框输入内容智能提示功能,这种功能常见于搜索引擎、输入框自动补全等场景,可以极大地提升用户输入体验。 1. **事件监听**: 在这个例子中,使用了`keyup`事件来...

    jquery表单制作text文本框autocomplete智能搜索提示框效果

    本篇文章将详细讲解如何利用jQuery实现一个text文本框的autocomplete智能搜索提示框效果,这对于创建类似百度搜索框的用户体验至关重要。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,...

    jQuery实现文本框获得焦点文字消失

    通过这种方式,我们实现了jQuery实现文本框获得焦点时文字消失的效果。这种方法不仅可以提高用户体验,还能保持页面的简洁性。在实际项目中,可以根据需要对代码进行优化和扩展,例如,为多个文本框添加此功能,或者...

    WPF自定义控件(按钮文本框组合框等等)

    WPF提供了丰富的内置控件,但有时这些控件可能无法完全满足我们的设计或功能需求,这时就需要我们创建自定义控件来实现特定的功能或视觉效果。下面将详细讲解如何在WPF中自定义按钮、文本框、组合框以及日期控件。 ...

    js实现input文本框点击时文字消失,失去焦点时文字出现

    <title>JS 实现input文本框效果 请输入关键词"> <script src="script.js"></script> ``` 在这个例子中,我们有一个ID为`searchInput`的输入框,它的`placeholder`属性设为“请输入关键词”。 接下来,我们...

    Android帮助文档及一些资料打包放送

    [Android]文本框实现搜索和清空效果 - 农民伯伯 - 博客园.mht380.75 KB 新浪微博布局学习——活用RelativeLayout - 农民伯伯 - 博客园.mht453.32 KB Android 3.0 r1 API中文文档(113) ——SlidingDrawer ....

    JQuery实现文本框自动补全(修改版)

    **jQuery实现文本框自动补全(修改版)** 在网页开发中,为了提供更好的用户体验,我们经常需要实现一种功能:当用户在输入框中输入文字时,系统能够根据已有的数据集自动给出建议,这就是所谓的“自动补全”或...

    jquery实现input搜索输入关键词后自动筛选相关信息效果

    // 如果关键词为空,清空搜索结果 $('#searchResults').empty(); } else { // 找到所有匹配的项 var matchedItems = data.filter(item => item.name.toLowerCase().includes(keyword)); // 更新搜索结果列表...

    利用CSS3实现文本框的清除按钮相关的一些效果

    综上所述,利用CSS3的伪类和伪元素来实现文本框的清除按钮效果是一个高效且视觉上吸引人的方法。它能够在现代浏览器中提升用户的交互体验,尤其是在移动设备上。对于开发者来说,这又是一个工具箱中非常实用的技术...

    jquery text文本框搜索段落文本关键词文字高亮显示

    本主题聚焦于利用jQuery实现一个功能:在文本框输入关键词后,自动搜索页面中的段落文本,并高亮显示匹配到的关键字。这个功能在很多场合都非常实用,比如搜索引擎结果预览、文档阅读器或在线教育平台。 首先,我们...

    javascript和jquery实现设置和移除文本框默认值效果代码

    总之,无论是使用原生JavaScript还是jQuery,实现设置和移除文本框默认值效果的关键在于合理运用onfocus和onblur事件,以及正确地处理input元素的value属性。通过上述示例,我们可以看到,通过简单的代码修改,即可...

    人工智能-项目实践-搜索引擎-实现仿搜索引擎文本框自动补全Jquery插件

    在本文中,我们将深入探讨如何使用Jquery实现一个仿搜索引擎文本框自动补全功能,这是一个在Web开发中常见的用户体验优化工具。此项目实践基于人工智能的背景,利用JavaScript库Jquery来提升用户在搜索框中的输入...

Global site tag (gtag.js) - Google Analytics