背景：

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

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

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

分析:点击用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. Mac OSX配置XAMP虚拟主机
			
    在前端工作中,有时候需要配置下环境,这篇文章主要是记录了在wamp中配置虚拟主机 首先需要下载wamp软件和navicat数据库管理软件进行管理,下面默认已经下载好所需软件.并且打开服务. 第一步:把 ...
    
			
    2. 
						
  2. Git - 信息查看
			
    git help git version # Display the version of git. git help # Prints the synopsis and a list of the  ...
    
			
    3. 
						
  3. POJ 2871
			
    #include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...
    
			
    4. 
						
  4. opencv2函数学习之erode、dilate：图像腐蚀和膨胀
			
    图像腐蚀和图像膨胀是图像中两种最基本形态学操作. ,-), ,int borderType=BORDER_CONSTANT, const Scalar& borderValue=morphol ...
    
			
    5. 
						
  5. JavaScript -- Table
			
    -----048-Table.html----- <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
    
			
    6. 
						
  6. JAVA微信服务号开发简记
			
    现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.所以这边做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说明. 基本认证信息说明  ...
    
			
    7. 
						
  7. 面试题-----按位翻转32位unsigned
			
    // test.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include < ...
    
			
    8. 
						
  8. <Think Python>中斐波那契使用memo实现的章节
			
    If you played with the fibonacci function from Section 6.7, you might have noticed thatthe bigger th ...
    
			
    9. 
						
  9. shell脚本中打印所有匹配某些关键字符的行或前后各N行
			
    在日常运维中,经常需要监控某个进程,并打印某个进程的监控结果,通常需要打印匹配某个结果的行以及其前后各N行. 注意:echo使用-e参数,对打印的结果中进行\n换行 [root@mq-master02 ...
    
			
    10. 
						
  10. Spring IOC 源码之ResourceLoader
			
    转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...
    
			
    11.