背景：

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

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

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

分析:点击用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. 剑指offer十六之合并两个排序的链表
			
    一.题目 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 二.思路 注:链表1和链表2是两个递增排序的链表,合并这两个链表得到升序链表为链表3. 首先分析 ...
    
			
    3. 
						
  3. C++与C的联系与区别
			
    C++与C的联系: C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛.C++支持多种编程范式 --面向对象编程.泛型编程和过程化编程. 其编程领域众广,常用于系统开发,引擎开发等应用领域, ...
    
			
    4. 
						
  4. jQuery ajax请求错误返回status 0和错误error的问题
			
    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...
    
			
    5. 
						
  5. PLSQL Developer概念学习系列之如何正确登录连接上Oracle（图文详解）
			
    不多说,直接上干货! 进入PLSQL Developer 1.双击 2.得到 比如,我这里安装的是 全网最详细的Windows系统里Oracle 11g R2 Database服务器端(64bit)的 ...
    
			
    6. 
						
  6. 解决org.apache.shiro.session.UnknownSessionException: There is no session with id的问题
			
    一.背景 最近在整合了Spring+Shiro+Redis实现tomcat集群session共享的问题之后,发布以后运行以后发现老是会出现:org.apache.shiro.session.Unkno ...
    
			
    7. 
						
  7. Centos7 开启端口
			
    CentOS7默认没有使用iptables,所以通过编辑iptables的配置文件来开启80端口是不可以的. CentOS 7 采用了 firewalld 防火墙. 如要查询是否开启80端口: [ro ...
    
			
    8. 
						
  8. 插入排序:直接插入排序&希尔排序
			
    一.直接插入排序 1. 思想 直接排序法, 可以分为两个部分, 一部分是有序的, 一部分是无序的. 从这个图上, 应该是能看清楚直接插入排序的思想了. 将无序部分的第一个与有序部分进行比较. 从有序部 ...
    
			
    9. 
						
  9. 《Netty权威指南》目录
			
    一.基础篇 走进Java NIO 1. Java 的 I/O 演进之路:https://www.cnblogs.com/zengzhihua/p/9930652.html 2. NIO 入门:http ...
    
			
    10. 
						
  10. A Personal Understanding to Matrix Transformation in Graphics
			
    A Personal Understanding to Matrix Transformation in Graphics--------------------------------------- ...
    
			
    11.