Question

我正在开展角度应用。用户打开模态框时，焦点将放在第一个文本框上。喜欢这个

<tbody>
   <tr>
      <td>
         <b></b>
         <div><b>First Name</b></div>
      </td>
      <td><input type="text" class="ng-pristine ng-valid" style="width:150px" focus="true" name="firstName" ng-model="record.firstName"></td>
   </tr>
   <tr>
      <td>
         <b></b>
         <div><b>Last Name</b></div>
      </td>
      <td><input focus type="text" class="ng-pristine ng-valid" style="width:150px" name="lastName" ng-model="record.lastName"></td>
   </tr>
   <tr>
      <td>
         <b></b>
         <div><b>Title</b></div>
      </td>
      <td><input focus type="text" class="ng-pristine ng-valid" style="width:150px" name="title" ng-model="record.title"></td>
   </tr>  
   <tr>
      <td>
         <b></b>
         <div><b>Language</b></div>
      </td>
      <td><input focus type="text" class="ng-pristine ng-valid" style="width:150px" name="language" ng-model="record.language"></td>
   </tr> 
</tbody>

Thsi是焦点指令

directives.directive('focus',function($timeout) {
            return {
                restrict: 'A',
                scope : {
                    trigger : '@focus'
                },
                link : function(scope, element) {
                    var focusables = $(":focusable");
                    scope.$watch('trigger', function(value) {
                        if (value === "true") {
                            $timeout(function() {
                                element[0].focus();
                            });
                        }
                    });
                element.bind('keydown', function(e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    var current = focusables.index(this);
                    var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                    next.focus();
                    e.preventDefault();
                }
              });
            }
        };
    });

当用户打开模态框并在文本框或模态框外部单击时，焦点将消失，当他点击退格模式框时将会出现但背面页面将重定向到上一页。如何在这里阻止退格。帮助我。

Answer 1

不要在元素上绑定$( "#btn_bcolor").appendTo($("#buttonDiv"));，而是将其绑定在文档或正文上。

而不是：

keydown

尝试：

element.bind('keydown', function(e) {

<强> JS：

$(document).bind('keydown', function(e) {...});

并确保在事件处理程序中放置一个条件以检查模态是否已打开。您只想在打开模态时阻止退格导航。因此，只有在打开模态时才需要应用它。

Answer 2

终于得到了答案：

directives.directive('disablebackbtn',function($timeout) {
    return {
        restrict: 'A',
        link : function(scope, element, attrs) {
            if (!attrs.modalVisible)
            {
                console.log("********************Modal Opened");
                element.parents("body").bind('keydown', function (e) {
                    var code = e.keyCode || e.which;
                    var nodeName = e.target.nodeName.toLowerCase();
                    if (e.which === 8) {
                        if ((nodeName === 'input' && e.target.type === 'text') ||
                            nodeName === 'textarea') {
                            // do nothing
                        } else {
                            e.preventDefault();
                        }
                    }
                });
            }

    }
};
});

AngularJS：防止模态框上的退格

2 个答案: