【问题标题】:AngularJS submit on blur and blur on keypressAngularJS提交模糊和按键模糊
【发布时间】:2013-08-25 17:16:36
【问题描述】:

我想在输入字段模糊时向服务器提交一些数据。用户还应该能够通过按 Enter 来模糊输入字段。

不幸的是,这会导致以下结果:$rootScope:inprog: $apply already in progress error

Plunkr - 提前致谢!

【问题讨论】:

    标签: angularjs keypress blur


    【解决方案1】:

    这是一个小指令:

        .directive('ngEnterBlur', function () {
        return function (scope, element, attrs) {
            element.bind("keydown keypress blur", function (event) {
                if(event.which === 13 || event.type === "blur") {
                    scope.$apply(function (){
                        scope.$eval(attrs.ngEnterBlur);
                    });
    
                    event.preventDefault();
                }
            });
        };
    })
    

    【讨论】:

      【解决方案2】:

      您可以查看 Angular UI @http://angular-ui.github.io/ui-utils/

      提供与模糊、焦点、keydow、keyup、keypress相关的详细事件句柄

      <input ui-event="{ blur : 'blurCallback()' }">
      <textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
      <textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
      <textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
      <textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
      <textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
      

      【讨论】:

      • 我遇到了 ng-blur 双重射击的问题。切换到用于模糊的 ui-event 立即解决了我的问题,并为我省去了很多麻烦。谢谢!
      【解决方案3】:

      这是发生了什么:

      • 你按回车
      • ng-keydown 触发器(摘要开始)
      • 您拨打target.blur()
      • ng-blur 触发并尝试开始另一个摘要循环
      • Angular 抱怨

      模糊是同步执行的,并在第一个摘要没有完成的情况下立即触发处理程序。

      在我看来,这不是您的代码的问题,而是一个 Angular 错误。我一直在想一个更好的解决方案,但我只能找到:

      app.controller('BlurCtrl', function($scope, $timeout) {
        $scope.blurModel = "I'm the value"
      
          $scope.blurOnEnter = function( $event ) {
            if ( $event.keyCode != 13 )
              return
      
            // this will finish the current digest before triggering the blur
            $timeout(function () { $event.target.blur() }, 0, false);
          }
      
          $scope.onBlur = function() {
          $scope.result = this.blurModel
          }
      })
      

      【讨论】:

      • 谢谢你。我只在 Safari 移动版上看到过这个。
      • 我在 Chrome 中遇到了这个问题。单击按钮时,我想在输入元素上调用 blur() 。在超时内添加 myInput.blur() 解决了我的问题!
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-12-24
      • 1970-01-01
      • 1970-01-01
      • 2020-03-17
      • 1970-01-01
      • 2011-07-22
      • 2014-01-23
      相关资源
      最近更新 更多