个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
考虑以下示例:
<input type="text" ng-model="client.phoneNumber" phone-number>
<button ng-click="doSomething()">Do Something</button>
.directive("phoneNumber", function($compile) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attrs) {
scope.mobileNumberIsValid = true;
var errorTemplate = "<span ng-show='!mobileNumberIsValid'>Error</span>";
element.after($compile(errorTemplate)(scope)).on('blur', function() {
scope.$apply(function() {
scope.mobileNumberIsValid = /^\d*$/.test(element.val());
});
});
}
};
});
查看demo ，如果您在电话号码末尾添加“a”，然后单击按钮，则不会调用 doSomething()。如果再次单击该按钮，则会调用 doSomething()。
为什么第一次不调用doSomething()？有什么想法可以解决这个问题吗？
注意:保持验证模糊非常重要。
最佳答案
mousedown事件。模糊状态，触发模糊回调以验证输入值。mouseup 事件。这就像单击按钮一样，但在释放鼠标之前移出按钮以取消按钮单击。这就是 ng-click 未触发的原因。因为按钮上没有触发 mouseup 事件。使用ng-pattern动态验证输入值，并根据ngModel.$invalid属性立即显示/隐藏错误范围。
根据作者的要求，用另一种解决方案更新了答案。
HTML
<body ng-app="Demo" ng-controller="DemoCtrl as demoCtrl">
<pre>{{ client | json }}</pre>
<div id="wrapper">
<input type="text" phone-number
ng-model="client.phoneNumber"
ng-blur="demoCtrl.validateInput(client.phoneNumber)">
</div>
<button ng-mousedown="demoCtrl.pauseValidation()"
ng-mouseup="demoCtrl.resumeValidation()"
ng-click="doSomething()">Do Something</button>
</body>
我在输入上使用了 ng-blur 指令来触发验证。如果在 ng-blur 之前触发 ng-mousedown，则 ng-blur 回调将推迟到 ng-mouseup被解雇了。这是通过利用 $q 服务来完成的。
关于AngularJS指令: ng-click is not triggered after blur，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21084932/
26
4
0
我想对我网站的一部分进行模糊处理，通过单击链接可以使其变得不模糊。为了使这个平滑，我需要应用 blur(0px) 并在元素上进行过渡。但问题是即使使用 blur(0px)，文本也会变得不清晰。 .pa
我有一些在元素上的“模糊”事件上运行的代码。此代码需要实际使用 activeElement，因此无法实际从“blur”事件运行。 我希望我能创建一个这样的事件。目的是“willblur”事件在“blu
我认为这个问题很简单。代码如下。 Show Menu let parent = document.getElementById('parent');
所以，我有一个简单的问题，实际上我已经把它写在标题中了。 :) 但我会再重复一次，只是为了完全清楚。问题是: 有没有办法知道“blur”是由“element.blur()”调用的还是“实际的”模糊？我
请看一下这个 jsfiddle:https://jsfiddle.net/heLwx9bz/ 我正在尝试通过过渡“取消模糊”悬停时的一些文本。请注意在转换为 blur(0px) 时文本如何轻微抖动，它
I have written this pen 编辑 see this pen of Alexander Omara for a shorter version of my pen 基本上，我们将 b
TL;DR 我怎样才能得到这个 self-explanatory JSFiddle上类？ 来自 the W3C : The blur event occurs when an element lose
我想检测我的浏览器窗口是否有焦点(被选中)。我使用以下代码来执行此操作: $(window).focus(function() { window.focusFlag = true; }).bl
我有两个文本框，其值为"is"和“否”。当我在第一个文本框中输入"is"时，它会发出蜂鸣声，其余文本框也会发生同样的情况。当我在相应的文本框中输入正确的值时，声音应该仅播放一次。 就我而言，声音一次又
所以我遇到的问题似乎有点奇怪。因此，我有一个隐藏的表单，直到单击按钮为止，单击按钮后，表格就可见，并且在输入上有一个 .blur 函数来检查它们是否为空。我尝试在整个 pcontroller 中添加
我正在尝试创建一个可以使用所有可能的填充选项的模糊函数。但是对于BORDER_CONSTANT，您还需要提供颜色，即您要用来填充图片的数字。在opencv的模糊文档中，我看不到需要填充和颜色值的函数模
我有 2 个元素。第一个元素有一个 blur 事件，第二个元素有一个 mousedown 事件。第二个元素上的 mousedown 事件将焦点返回到第一个元素，但由于某种原因会触发第一个元素上的 bl
我试图使用 jQuery 创建一个可编辑的表格。 作为它的一部分，我显示了一个 td 的文本区域 onClick 并且在该文本区域的模糊处我隐藏了它。 问题是当我继续点击其他 td 时，文本区域模糊会
这里 Sample DEMO 我想在类 .drow1 .subval 失去焦点时触发事件，可能缺少某些内容， JS: $(".drow1 .sub_val").on('blur',funtion(){
这是我的代码: 我将以下几行放入脚本中 $('#m').on('blur', alert('blurred');); $('#m').on('focus', alert('focused'););
我有这段代码: window.addEventListener( "focus" , function(){ window.console.log("focus"); } , false );
我为我正在开发的网络应用程序编写了一个自定义下拉列表，并且我想用它来完成一组特定的功能。首先，如果您将鼠标移离菜单，我希望下拉菜单保持打开状态。我希望当您重新单击下拉列表标题、单击下拉列表中的元素之一
我有 3 个 .blur，但出于某种原因只有第一个有效。这是 jquery 代码: $(document).ready(function() { $("#user_name"
我正在尝试使用 HTML5 来验证数字输入。我正在使用 jQuery 来创建元素。如何让浏览器在不单击提交按钮的情况下显示 onBlur 错误消息？ jQuery(document.createEle
我一直在试验 backdrop-filter最近，通常使用它来模糊元素后面的任何内容(这是动态的，所以 我不能只使用像 this 这样的东西)。但是，我还需要为所述元素应用阴影，所以我简单地添加了 b
我是一名优秀的程序员,十分优秀！