背景：

制作一个类似百度输入法的智能提示框，

其中当关键词输入进来时，会有智能提示展开，实际需求是当点击智能提示框的汉字时，输入框中自动补全并关闭智能提示,

当点击其他区域时,智能提示框自动隐藏，如下所示：

分析:点击用onclick事件触发获取的值,然后点击外框用失去焦点的方式解决

但实际出现效果是:

如果添加了失去焦点的方法,点击提示文本的时候,文字也会因为输入框失去焦点而被隐藏,以至于文字无法被选中上去:

问题出现时用方法如下:

//oA是智能提示框的列表中的单个文字

oA.onclick = function(){ populateModel(this) };

// 点击提示文本,获取文本并填充到输入款中(wd是输入框)

function populateModel(cell) {

            wd.value = cell.firstChild.nodeValue;

            clearModels();//清除自动完成行

        }

//填充后清除提示

 function clearModels() {

            while (oUl.childNodes.length > 0) {

                oUl.removeChild(oUl.firstChild);

            }

            oLi.style.border = "none";

        }

// 失去焦点隐藏 其中输入框中有属性:onblur="upperCase()",其中oUI 是智能提示的区域

function upperCase() {

        oUl.style.display = 'none';

}

解决方案: 这里不得不先讲下鼠标点击事件

鼠标事件

属性 描述 DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发  
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。

鼠标点击点击过程是先按下鼠标(mousedown)然后弹起来(mouseup),这一过程才触发了click事件,当click触发之前,也就是mouseup时,blur已经先触发失去焦点,

因此,当你点击提示框文字时,并没有触发到click事件而是因为失去了焦点而提示框提前被隐藏掉了;

所以综上分析,解决方法有两种

1 将文字被选中这一事件用mousedown来监听,当鼠标按下时,就将文字先选中,然后弹起来时再自动触发onblur事件隐藏提示框中内容:

代码如下:

 oA.onmousedown = function(){ populateModel(this) };//修改了onclick改为onmousedown,其他均不变;

2另一种方式就是,不用失去焦点的方式来隐藏DOM,而是用鼠标移出提示框区域时,触发mouseseleave事件来隐藏DOM

代码如下:

oA.onclick = function(){ populateModel(this) };//仍然使用onclick事件触发文字获取

oUl.onmouseleave = function(){ oUl.style.display = 'none'; }// 当鼠标移除提示框之外后,自动隐藏

完整的百度智能输入法提示的JS代码:



<body>


<input type="text" id="wd" name="username" onblur="upperCase()" autocomplete="off" >


<ul id="list"></ul>




</body>





<script>

        var wd = document.getElementById('wd');

        var oUl = document.getElementById('list');

        wd.oninput = debounce(getUserAction, 100, false);

        function debounce(func, wait, immediate) {

            var timer = null;

            var result;

            var debounced = function () {

                var _this = this;

                var argu = arguments;

                clearTimeout(timer);

                if (immediate) {

                    if (!timer) func.apply(_this, argu);

                    timer = setTimeout(function () {

                        timer = null;

                    }, wait)

                } else {

                    timer = setTimeout(function () {

                        func.apply(_this, argu);

                    }, wait)

                }

                return result;

            }

            debounced.cancel = function () {

                clearTimeout(timer);

                timer = null;

            }

            return debounced;

        }

        function getUserAction() {

            if (wd.value) {

                var oScript = document.createElement('script');

                oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd.value + '&cb=doJson';

                document.body.appendChild(oScript);

                document.body.removeChild(oScript);

            } else {

                oUl.style.display = 'none';

            }

        }

        function doJson(data) {

            var dataList = data.s;

            oUl.innerHTML = '';

            if (dataList.length == 0) {

                oUl.style.display = 'none';

            } else {

                dataList.forEach(function (item, index) {

                    var oLi = document.createElement('li');

                    var oA = document.createElement('a');

                    oA.onmousedown = function(){ populateModel(this) };//单击oA是的方法为populateModel

                    // oA.onclick = function(){ populateModel(this) };//单击oA是的方法为populateModel

                    // oUl.onmouseleave = function(){ oUl.style.display = 'none'; }

                    oA.innerText = item;

                    oLi.appendChild(oA);

                    oUl.appendChild(oLi);

                    oUl.style.display = 'block';

                })

            }

        }

        function populateModel(cell) {

            wd.value = cell.firstChild.nodeValue;

            clearModels();//清除自动完成行

        }

        function clearModels() {

            while (oUl.childNodes.length > 0) {

                oUl.removeChild(oUl.firstChild);

            }

            oLi.style.border = "none";

        }

            // 失去焦点隐藏

        function upperCase() {

        oUl.style.display = 'none';

        }

    </script>




　　
												


											
解决input中智能提示框onblur与onclick冲突的问题的更多相关文章
	

    
								
  1. xcode6 beta 中智能提示(自动完成)功能有时不显示的问题
		
    xcode6 beta 中智能提示(自动完成)功能有时不显示的问题      周银辉 xcode6 beta 中智能提示(自动完成)功能有时不显示,这让人很郁闷啊,网上老外的视频中看人家用的好好的.  ...
    
		
    2. 
						
  2. winform下的智能提示框
		
    winform下的智能提示框 最近在搞winform的程序,接触到有些可能以后还会用到的功能,所以写到博客园里去,第一可以加深自己的印象,第二可以在以后再遇到同样问题的时候忘记了可以马上回来看看,第三 ...
    
		
    3. 
						
  3. 归纳一下input中span提示以及input中onchange事件
		
    一.当input中不含有onclick事件的时候 定义一个class为tip1的span: <td><input  type=text name='POSTNAME' nameVal ...
    
		
    4. 
						
  4. 智能提示框---bai
		
    input.jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...
    
		
    5. 
						
  5. Win7系统下VS2008安装SP1补丁解决JQuery无智能提示的问题
		
    jQuery在vs2008中的智能提示 1  安装VS2008SP1补丁 要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现“版本 3.5 sp1”,没安 ...
    
		
    6. 
						
  6. 在echarts中自定义提示框内容
		
    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...
    
		
    7. 
						
  7. 活动中使用提示框（Toast）
		
    任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz ...
    
		
    8. 
						
  8. 解决VS不能智能提示
		
    前一段时间在电脑上装了VS2013,导致VS2010上不能正常进行单元测试,折腾了一番,把VS2013又给卸载了,结果发现VS2010的智能提示没有了,没有就没有吧,懒的去管,就一直用 Ctrl +  ...
    
		
    9. 
						
  9. echarts中tooltip提示框位置控制
		
    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SpringMVC初探-HelloWorld
			
    MVC的概念 MVC是一种设计模式,即Model--View-Controller,模型--视图--控制器 Model(模型)表示应用程序核心(比如数据库记录列表). View(视图)显示数据(数据库 ...
    
			
    2. 
						
  2. jQuery Mobile Api
			
        jQuery Mobile提供了使用Javascript与框架(html5)通信以及进行内容管理的API.下面介绍具体事件. 文档事件     mobileinit事件会在jQuery Mob ...
    
			
    3. 
						
  3. 课程二(Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization)，第三周（Hyperparameter tuning, Batch Normalization and Programming Frameworks） —— 2.Programming assignments
			
    Tensorflow Welcome to the Tensorflow Tutorial! In this notebook you will learn all the basics of Ten ...
    
			
    4. 
						
  4. opencv实现正交匹配追踪算法OMP
			
    //dic: 字典矩阵: //signal :待重构信号(一次只能重构一个信号,即一个向量) //min_residual: 最小残差 //sparsity:稀疏度 //coe:重构系数 //atom ...
    
			
    5. 
						
  5. 【Canal源码分析】TableMetaTSDB
			
    这是Canal在新版本引入的一个内容,主要是为了解决由于历史的DDL导致表结构与现有表结构不一致,导致的同步失败的问题.采用的是Druid和Fastsql,来记录表结构到DB中,如果需要进行回滚时,得 ...
    
			
    6. 
						
  6. Twitter Bootstrap3小结
			
    今天有空,小结一下Twitter Bootstrap 3的使用.首先不得不说,Bootstrap是迄今(2014)比较好的WEB设计框架(当然,其它的优秀WEB Framework还有:Foundat ...
    
			
    7. 
						
  7. Spring中内置的一些工具类
			
    学习Java的人,或者开发很多项目,都需要使用到Spring 这个框架,这个框架对于java程序员来说.学好spring 就不怕找不到工作.我们时常会写一些工具类,但是有些时候 我们不清楚,我们些的工 ...
    
			
    8. 
						
  8. Java总结：字符串详解
			
    更新时间:2018-1-6 21:20:39 更多请查看在线文集:http://android.52fhy.com/java/index.html String 字符串创建 String str1=& ...
    
			
    9. 
						
  9. Mysql索引会失效的几种情况分析
			
    转:https://www.jb51.net/article/50649.htm 学习啦
    
			
    10. 
						
  10. 面试：atoi和itoa的实现
			
    1.int atoi(const char* src) nullptr指针 空白字符' ','\t','\n' 符号位 避免值溢出 出错信息保存在全局变脸errnum中 ; int atoi(cons ...
    
			
    11.