正文

解决input中智能提示框onblur与onclick冲突的问题(代码片段)

anderson-an  anderson-an  2023-03-01  588

关键词：

背景：

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

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

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

技术分享图片

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

</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控件的onchange与onblur事件区别？

...比较对象的初始状态和改变后的状态(失去焦点后的状态)onBlur失去焦点时触发参考技术Aonchange是指控件的值发生改变且失去焦点时触发的事件onblur是不管值有无改变，失去焦点就触发事件参考技术Bonchange是INPUT中的文本修改后然... 查看详情

解决textinput点击输入框外面没有触发onblur

在大的view外面套一个触发事件<TouchableWithoutFeedback　　style={{flex:1}}　　onPress={()=>{　　　　this.textInputName.blur();　　}}>...　　<TextInput　　　　ref={(ref)=>this.textInputName=ref}　　/>...</Toucha 查看详情

input控件的onchange与onblur事件区别？

...也就是说，在焦点离开控件且值发生变化时，该事件触发onblur只要焦点离开就触发，不管值有没有变化至于两者哪个先执行，倒没有测试过，你可以试一下参考技术Aonchange是当控件的值发生变化触发,就是2次值不一样就触发onblur... 查看详情

js鼠标事件中onchange与onblur我感觉是一样的，有啥区别

他们都是光标的焦点消失时才触发。那有什么区别呢onblur是输入焦点失去触发，onchange是内容发生改变并且失去焦点触发。参考技术Aonblur是输入焦点失去，onchange是内容发生改变。比如onblur是当你的光标移入文本框时触发的时间... 查看详情

输入框提示信息的设置与输入框的焦点取消

提示信息颜色改变：input::-webkit-input-placeholder{color:lightgreen;}输入框的焦点取消:input{/*设置输入框的内容缩进*/padding-left:10px;/*设置输入框边框颜色*/border:1pxsolidred;/*取消输入框选中后的焦点框(不要焦点框)*/outline:none;color:green;} 查看详情

清除文本框值 onclick 并显示 onblur

】清除文本框值onclick并显示onblur【英文标题】：Clearingthetextboxvaluesonclickanddisplayingonblur【发布时间】：2013-02-2611:53:39【问题描述】：有没有办法清除默认文本框值onclickontextbox并在表单页面上显示多个文本框的onblur？【问题讨论... 查看详情

input标签与图片按钮水平对齐解决方法

...到了这个问题，并且使用margin、padding等Css语法，都没有解决。　　解决方法其实很简单，我们只要加上vertical-align:middle属性就可以了。　　来看实例：提示：您可以先修改部分代码再运行页面直接摆放一个input文本... 查看详情

javascript控制input仅能输入数字

...。效果：仅能输入0-100以内的一位小数，输入有误将提示并清空输入框。一、利用鼠标移除事件，正则校验进行控制，方法如下：<inputtype="text"id="num"onblur="varreg=/^(((d|[1-9]d)(.d{1,1})?)|100|100.0|100. 查看详情

javascript:onblur与onfocus区别

一、onblur1.1说明onblur属性在元素失去焦点时触发，onblur常用于表单验证代码（例如用户离开表单字段）。1.2示例<input type="text" name="" id="" onblur="javascript:alert(‘onblur‘);">二、onfocus2.1说明onfocus属性在元素获得焦... 查看详情

javascript中怎么设置文本框获得焦点

...t;inputname="pwuser"type="text"id="pwuser"class="input"value="楼盘账号"onBlur="if(this.value==\'\')this.value=\'楼盘账号\';"onFocus="if(this.value==\'楼盘账号\')this.value=\'\';"/><inputname="pwpwd"type="password"class="input1"value="******"onBlur="if(this.value==\'\')this.value=\'... 查看详情

js事件失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。(代码片段)

失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。如下代码,网页中有用户和密码两个文本框。当前光标在用户文本框内时（即... 查看详情

click和blur事件冲突解决方案

...，同一时间只能处理一个事件，且blur执行顺序优先click.解决方案：将o 查看详情

在文本框更新之前调用 onblur

】在文本框更新之前调用onblur【英文标题】：onblurisgettingcalledbeforetextboxgetsupdated【发布时间】：2017-03-2410:32:12【问题描述】：我有一个日期文本框，因此用户可以使用日期选择器选择日期。我想知道日期是否更改，所以我在文本... 查看详情

javascript进阶

有聚焦，肯定就有失焦。onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。如下代码，网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本... 查看详情

visualstudio201715.3.1中xamarin.formssap项目xaml没有智能提示的解决方法

今天看到vs上有提示了可以更新到15.3.1版本，然后马上更新了，结果悲剧了。更新以后ReSharper不能用了，好像跟vs2017有了冲突，不管是vs2017自带的智能提示功能，还是ReSharper都开始抽风，没办法，只能把ReSh... 查看详情

获取input框输入值异常

...值的方式不正确，从而导致未能获取input框内的输入值。解决方法通过onchange事件对模型赋值来获取input框的值，具体方法如下：1、初始化模型、1.d 查看详情

解决input输入框在ios系统中无法输入内容(代码片段)

问题input输入框在Android系统可以输入和点击，但是在iOS系统上input输入框无法点击和输入。解决去掉下列样式-webkit-touch-callout:none;-webkit-user-select:none;或者这样写*:not(input,textarea)-webkit-touch-callout:none;-webkit-user-select:none;拓展查看详情

chrome缓存导致死循环事件

...。动作完成后第一次登陆没有问题，登陆后根据浏览器的提示先择保存用户名和密码。当退出登录后，再次打开登陆页面，chrome浏览器会自动加载已保存的用户名和密码。此时会出现死循环现象，循环调用onblur事件，不停访问后... 查看详情