背景：

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

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

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

分析:点击用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. underscore.js源码研究(6)
			
    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
    
			
    2. 
						
  2. C#6.0语言规范(七) 表达式
			
    表达式是运算符和操作数的序列.本章定义了操作数和运算符的语法,求值顺序以及表达式的含义. 表达式分类 表达式分类为以下之一: 一个值.每个值都有一个关联的类型. 一个变量.每个变量都有一个关联的类型, ...
    
			
    3. 
						
  3. Python动态变量名定义与调用
			
    动态变量名赋值 在使用tkinter时需要动态生成变量,如动态生成var1...var10变量 使用exec动态赋值 exec在python3中是内置函数,它支持python代码的动态执行. 示例:  ...
    
			
    4. 
						
  4. git commit --amend的撤销方法
			
    某同事执行git commit 时太兴奋,执行了 git commit --amend 慌了,不敢编辑上一个commit的description了,直接选择了wq退出,然而git毕竟强大,默认将改动合 ...
    
			
    5. 
						
  5. Redis笔记(2)单机数据库实现
			
    1.前言 上节总结了一下redis的数据结构和对象构成,本章介绍redis数据库一个基本面貌,是如何设计的. 2.数据库 服务器结构redisServer: redisDb *db: 一个数组,保存服 ...
    
			
    6. 
						
  6. Java8简明指南
			
    Java8简明指南 转载自并发编程网 – ifeve.com本文链接地址: Java8简明指南 欢迎来到Java8简明指南.本教程将一步一步指导你通过所有新语言特性.由短而简单的代码示例,带你了解如何 ...
    
			
    7. 
						
  7. 六、CLR下的托管代码应用程序与非托管代码程序之间的性能对比
			
    1.托管程序二次编译的问题,以及微软做的优化 五.CLR加载程序集代码时,JIT编译器对性能的产生的影响中介绍了CLR下托管应用程序的二次编译对性能产生的影响.事实上,在IL编译成本机代码的时候的时候 ...
    
			
    8. 
						
  8. 【转载】CentOS中crontab定时计划任务的使用
			
    转载自:http://blog.csdn.net/testcs_dn/article/details/48780971 概述 利用“任务计划”,可以将任何脚本.程序或文档安排在某个最方便的时间运行.通 ...
    
			
    9. 
						
  9. Visual Studio最好用的快捷键（你最喜欢哪个）
			
    每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...
    
			
    10. 
						
  10. spring boot 自动更新静态文件和后台代码 -- 热部署
			
    在spring boot使用的过程中, 发现我修改了静态文件, 前台刷新后, 没有任何变化, 必须重新启动, 才能看到, 这简直不能让人接受. 那有什么方法来解决这个问题呢. Baidu之后, 得到了 ...
    
			
    11.