html5 इंटरनेट एक्सप्लोरर में ऑटोफोकस का उपयोग करते समय मॉडेल में अजीब कर्सर प्लेसमेंट




angularjs internet-explorer (3)

IE में autofocus का प्रयोग करते समय मुझे कर्सर प्लेसमेंट के साथ एक समस्या हो रही है छवि को इस मुद्दे को स्पष्ट रूप से प्रदर्शित करना चाहिए

सौभाग्य से मैं इसे एक प्लंकर में पुन: पेश करने में सक्षम हूं । मैंने उसे बेतरतीब अनिवार्य रूप से छीन लिया है, इसलिए यह देखना काफी आसान होना चाहिए कि क्या हो रहा है।

मैं कैसे IE व्यवहार करते हैं?

कोणीय जेएस ( प्लंकर में भी उपलब्ध है)

app.directive('autofocus', [
  '$timeout', function($timeout) {
      return function(scope, elem, attr) {
          scope.$on('autofocus', function(e) {
              $timeout(function() {
                  elem[0].focus();
              });
          });
      };
  }
]);

/* http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs */
app.factory('autofocus', ['$rootScope', '$timeout', function($rootScope, $timeout) {
  return function() {
      $timeout(function() {
          $rootScope.$broadcast('autofocus');
      });
  };
}]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main', {
        url: '/main'
    });
}]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main.modal', {
        url: '/modal',
        onEnter: ['$state', '$stateParams', '$modal', 'autofocus',
            function ($state, $stateParams, $modal, autofocus) {
                var instance = $modal.open({
                    templateUrl: 'modal.html'
                });
                instance.result.then(function () {
                    // OK
                    // GOTO parent state
                    $state.go('^');
                }, function () {
                    // Cancel
                    // GOTO parent state
                    $state.go('^');
                });
                instance.opened.then(function() {
                  autofocus();
                });
            }
        ]
    });
}]);

मार्कअप

<form>
  <div class="modal-header">
      <h3 class="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body">
      <input type="text" name="foo" autofocus>
      <br>
      <input type="text" name="bar">
  </div>
  <div class="modal-footer">
      <button type="submit" class="btn btn-primary">OK</button>
      <button type="button" class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
  </div>
</form>

ऐसा लगता है कि मैं "स्लाइड" -नमनी हो सकती है जो कि दोष है। मैंने इसे फिसलने के लिए मोडल को मजबूर करके इसे ठीक करने में कामयाब किया: "विंडोक्लास: मोडल फीड इन" जैसे:

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('main.modal', {
        url: '/modal',
        onEnter: ['$state', '$stateParams', '$modal', 'autofocus',
            function ($state, $stateParams, $modal, autofocus) {
                var instance = $modal.open({
                    templateUrl: 'modal.html',
                    windowClass: 'modal fade in'
                });
                instance.result.then(function () {
                    // OK
                    // GOTO parent state
                    $state.go('^');
                }, function () {
                    // Cancel
                    // GOTO parent state
                    $state.go('^');
                });
                instance.opened.then(function() {
                  autofocus();
                });
            }
        ]
    });
}]);


मैं इस कोड का इस्तेमाल किया और मेरी समस्या हल:

<form>
 <div class="table-condensed">
  <table class="table table-condensed">
    ....
   <tr>
    <td>
        <textarea class="form-control"></textarea>
    </td>
   </tr>
  </tbody>
 </table>
</div>


इस मुद्दे के दस्तावेज और निदान के लिए धन्यवाद। यह एकमात्र विषय था जो मुझे इसके बारे में मिल सकता था और ऐसा अक्सर समस्या की तरह लगता है क्या यह स्क्रिप्ट नहीं है एक ओवरकिल के sollution बिट?

समस्या के लिए सीएसएस sollution ::

.modal.fade {
transition:opacity .3s linear;
}

यह प्रभाव में स्लाइड को मारता है, लेकिन फीका में छोड़ देता है







angular-ui-bootstrap