解决input中智能提示框onblur与onclick冲突的问题

背景:

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

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

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

分析:点击用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>

  

原文地址:https://www.cnblogs.com/Anderson-An/p/10327196.html

时间: 2024-10-07 01:26:05

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

解决scrollView中嵌套编辑框导致不能上下滑动的问题

EditText设置maxLines之后,文本行数超过maxLines,会网上折叠,上下滑动可以浏览所有文本. 若EditText外层有scrollView,在EditText上下滑动,不会像正常情况那样上,只会滑动了scrollView. 解决办法是: mEt_content.setOnTouchListener(this); // 解决scrollView中嵌套EditText导致不能上下滑动的问题 @Override public boolean onTouch(View v, Motio

xcode6 beta 中智能提示(自动完成)功能有时不显示的问题

xcode6 beta 中智能提示(自动完成)功能有时不显示的问题      周银辉 xcode6 beta 中智能提示(自动完成)功能有时不显示,这让人很郁闷啊,网上老外的视频中看人家用的好好的. 原来是一个bug,解决方案是:把代码文件中的中文字符全部删掉. xcode6 beta 中智能提示(自动完成)功能有时不显示的问题

归纳一下input中span提示以及input中onchange事件

一.当input中不含有onclick事件的时候 定义一个class为tip1的span: <td><input  type=text name='POSTNAME' nameVal='POSTCODE'  required='required' onchange='showtips()'> <span class='tip1'></span> </td> js中加载提示内容:这个提示只限于postname为空的时候 if($(this).fin

活动中使用提示框(Toast)

任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz03.com/share/s/2cABOq0BC4HP2LGV_j2dj_pL2PmFkt3XSkVX2GjSRG3a9rRL 2.定义一个Toast的触发点,可以让按键点击的时候弹出这个Toast protectedvoid onCreate(Bundle savedInstanceState){

Ubuntu12.04中eclipse提示框黑色背景色修改

eclipse提示框的背景颜色使用的是系统的提示框颜色配置,在windows下为黄色,但在Ubuntu12.04(gnome)下却 是黑色,造成提示内容很难看清. 在eclipse中我们是无法修改这个颜色的配置的,只能通过修改系统的颜色配置.在ubuntu11.10以前,我们是 可以能过自定义系统外观来修改这一颜色的配置的,但自ubuntu11.10以后,就没有相关的操作界面了,只能通过修改配置文件的方式实现了.这个文件 位于/usr/share/themes/下对应的主题文件夹下,如你使用Ra

在echarts中自定义提示框内容

1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成百分比数据后,显示当前单个数据项的提示框: 第3张是处理成百分比数据后,显示当前横坐标下多个数据项的提示框. 图1.默认提示框.jpg 图2.单项提示框.jpg 图3.多项提示框.jpg 2.实现 (本文代码只涉及配置项的部分代码) 上述图片的效果可用echarts的tooltip组件中的一个for

echarts中tooltip提示框位置控制

option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis', position: function(point, params, dom, rect, size){ //其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小 var x = point[0];// var y = point[1]; var viewWidth = size.v

javascript中简单提示框

.help-tip{ width: 350px; border:1px solid #A0A0A0; background-color: #F8F8F8; border-radius: 5px; display: none; position: absolute; z-index:5555; left: 0; } .help-tip p{ padding: 5px 5px 0 8px; font-size: 13px; color: black; } function show(){ $(".h

[easyui] - 在easyui的table中展示提示框

因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('searchform'), 后设置: //悬停提示tooltip onLoadSuccess: function (data) { $(this).datagrid('tooltip'); }, 之后 columns: [[ 后的 ]] }, //新增逗号 添加: //之下为鼠标悬停table上展示单个字段