标签: onblur

我有一个输入字段,我尝试制作自动填充建议.代码看起来像

<input type="text" id="myinput">
<div id="myresults"></div>

在输入blur()事件中我想隐藏结果'div:

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

当我在输入中写入内容时,我向服务器发送请求并获取json响应,将其解析为ul-> li结构并将此ul放到我的#myresultsdiv中.

当我点击这个解析的li元素时,我想将值从li设置为input并隐藏#myresultsdiv

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

一切都很顺利,但是当我点击我的li blur()事件之前触发click()并且输入的值不会得到li的html.

我怎么能click()在之前设置活动blur()？

你如何在Angular2中检测到onBlur事件？我想用它

<input type="text">

任何人都可以帮我理解如何使用它吗？

我有一个输入字段,显示自定义下拉菜单.我想要以下功能:

• 当用户单击输入字段外的任何位置时,应删除菜单.
• 更具体地说,如果用户点击菜单中的div,则应删除菜单,并根据单击的div进行特殊处理.

这是我的实现:

输入字段有一个onblur()事件,innerHTML只要用户在输入字段外单击,就会删除菜单(通过将其父项设置为空字符串).菜单中的div也有onclick()执行特殊处理的事件.

问题是onclick()单击菜单时事件永远不会触发,因为输入字段onblur()首先触发并删除菜单,包括onclick()s!

我解决了这个问题,将菜单div onclick()分成' onmousedown()和onmouseup()事件,并在鼠标按下时设置一个全局标志,鼠标向上清除,类似于本答案中的建议.因为onmousedown()之前触发onblur(),onblur()如果单击其中一个菜单div ,则会设置标志,但如果屏幕上的其他位置没有,则不会.如果单击菜单,我立即返回onblur()而不删除菜单,然后等待onclick()触发,此时我可以安全地删除菜单.

有更优雅的解决方案吗？

代码看起来像这样:

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}

假设我这样做:

$(target).blur(function(e){
  //do stuff
});

有没有办法获取被点击的对象以触发模糊操作？

我尝试使用e.target,但这似乎是返回附加到模糊操作的对象而不是单击的对象.

我有一个<input type="text">字段,当这个字段失去焦点时我需要清除它(这意味着用户点击了页面上的某个地方).但有一个例外.当用户单击特定元素时,不应清除输入文本字段.

我试图用来event.relatedTarget检测用户是否点击了某个地方而不是我的具体点击<div>.

但是正如您在下面的代码段中看到的那样,它根本不起作用.event.relatedTarget总是回来null!

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>

我正在尝试创建一个密码确认功能,只有在用户离开确认字段后才会出现错误.我正在使用Facebook的React JS.这是我的输入组件:

<input
    type="password"
    placeholder="Password (confirm)"
    valueLink={this.linkState('password2')}
    onBlur={this.renderPasswordConfirmError()}
 />

这是renderPasswordConfirmError:

renderPasswordConfirmError: function() {
  if (this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},

当我运行页面时,输入冲突的密码时不会显示该消息.

我正在尝试在我正在创建的网页上进行jQuery验证.我有大约6个不同的字段集,其中包含页面的详细信息.我正在使用它,因为我隐藏并向他们展示提供更好的用户体验.

每当我尝试提交页面时,无论何时添加单个字符(当文本框需要2个或更多字符时),我都会按照我的要求运行插件,但是我也希望验证发生在onblur上.如果他们没有达到验证条件,我想立即通知我的用户,以便他们可以立即修复它,而不必回来.

任何人都可以告诉我我需要做什么我正在使用*http://bassistance.de/jquery-plugins/jquery-plugin-validation/插件.

这是我到目前为止编写的jQuery代码:

      $("#aspnetForm").validate({
            rules: {
            <%=txtFirstName.UniqueID %>:
                {
                    required: true,
                    minlength: 2
                }
                ,
                <%=txtSurname.UniqueID %>:
                {
                    required: true,
                    minlength: 2
                }
                ,
                <%=txtMobileNumber.UniqueID %>:
                {
                    required: true,
                    minlength: 8
                }
                ,
                <%=Email.UniqueID %>:
                {
                    required: true,
                    email: true
                }
                ,
                   <%=ddDay.UniqueID %>:
                {
                    required: true

                }
                ,
                   <%=ddMonth.UniqueID %>:
                {
                    required: true

                }
                ,
                   <%=ddYear.UniqueID %>:
                {
                    required: true

                }
                ,
                <%=txtHouseNumber.UniqueID %>:
                {
                    required: true,
                    minlength:1

                }
                ,
                <%=txtAddress1.UniqueID %>:
                {
                    required: true,
                    minlength:5 …

我曾经遇到过这个问题几次,我对以前用过的解决方案不满意.

我有一个带有模糊事件的输入框,可以验证它的内容,还有一个按钮,可以在点击时填充输入框.问题是单击按钮会触发输入模糊事件,然后触发按钮单击事件,因此按钮插入的内容不是验证的内容.

见http://jsfiddle.net/jakecr/dL3K3/

我知道这是正确的行为,但我想不出一个彻底解决问题的方法.

我在页面上有一个div,显示有关特定类别(图像,名称等)的一些信息.

当我点击编辑图像时,它会将类别置于编辑模式,这样我就可以更新名称.从下图中可以看出,它显示"Soup"当前处于编辑模式,其他处于正常视图模式.这一切都按预期工作,取消/保存按钮做正确的事情.(我尝试添加图像,但不会让我,需要更多的爱)

然而,一旦处于编辑模式,如果我点击页面上的任何其他位置(div之外),预期结果将是汤类别将返回查看模式.在某种事件发生后,这也应该让我问他们是否想要保存更改.

所以我接下来决定在"汤"父div上创建一个模糊事件.如果我单击页面上的任何位置,这将按预期工作,但是如果我单击div的内部元素,它也会导致父模糊事件被触发,从而导致类别返回到查看模式.

那么,有没有办法阻止父div在其任何一个子节点获得焦点时触发模糊事件？

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

我只是在没有编译器的情况下编写代码,所以不确定这是否有效,但希望你能得到这个想法.

我正在使用Knockout.js动态更新GUI,但这不应该影响这个我不会想到的答案.

我有一个div就像一个下拉菜单.因此,当您单击按钮时弹出窗口,它允许您滚动浏览此大列表.所以div有一个垂直滚动条.如果你点击div之外,即模糊,div应该会消失.

问题是,当用户点击div的滚动条时,IE会错误地触发onblur事件,而Firefox则不会.我猜Firefox仍然将滚动条视为div的一部分,我认为这是正确的.我只是希望IE的行为方式相同.