2017-04-07 4 views
2

ラジオボタンセットにng-modelを追加すると、タブインしたときにどの入力がフォーカスされるかが変わるようです。 IE11(11.842.10586.0)とAngular 1.6.3でテストされています(Angularの旧バージョンでも発生しますが)。IE11のng-modelの影響を受けるラジオボタンのタブ/フォーカスの動作

<!DOCTYPE html> 
<html lang="en"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="formCtrl"> 
    <form> 
    <input type="text" ng-model="firstname"> 
    <br/> 
    <input type="radio" value="1" name="radioExample" checked> 
    <input type="radio" value="2" name="radioExample"> 
    <input type="radio" value="3" name="radioExample"> 
    <br/> 
    <input type="text" ng-model="firstname"> 

    </form> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
    $scope.firstname = ""; 
    $scope.radioValue = "1"; 
}); 
</script> 

</body> 
</html> 

http://plnkr.co/edit/nwo7sljK4NIEr66T6q7w

これは正常な動作を示しています。ラジオボタンが選択されている場合、ラジオボタングループへのタブ移動は選択されたラジオボタンにフォーカスします。ラジオボタンが選択されていない場合は、タブ移動で最初の要素にフォーカスが移動し、最後のタブにフォーカスが移動します。

<!DOCTYPE html> 
<html lang="en"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="formCtrl"> 
    <form> 
    <input type="text" ng-model="firstname"> 
    <br/> 
    <input type="radio" value="1" ng-model="radioValue" name="radioExample"> 
    <input type="radio" value="2" ng-model="radioValue" name="radioExample"> 
    <input type="radio" value="3" ng-model="radioValue" name="radioExample"> 
    <br/> 
    <input type="text" ng-model="firstname"> 

    </form> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
    $scope.firstname = ""; 
    $scope.radioValue = "1"; 
}); 
</script> 

</body> 
</html> 

http://plnkr.co/edit/vMlG7RUg2Kd0sZLmr0lb

これはNG-モデルが追加された変性挙動を示します。ラジオボタンが選択されているかどうかにかかわらず、タブ移動は最初の要素にフォーカスし、タブバックは最後の要素にフォーカスを合わせます。この動作は、別のラジオボタンが手動で選択された後も維持されます。

チェック/ ngチェック、遅延時間のモデル初期化と$ timeoutの組み合わせを使用して、<fieldset>を試してみました。

この問題の原因は、第2のシナリオを最初のシナリオと同じように動作させる方法です(選択したラジオボタンをタブに合わせる)。

答えて

0

「修正された動作」の例をplnkrにフォークし、最初のラジオボタンにchecked属性を追加しました。タブビンは、「通常の動作」の例と同じように動作します。

<input type="radio" value="1" ng-model="radioValue" name="radioExample" checked> 
<input type="radio" value="2" ng-model="radioValue" name="radioExample"> 
<input type="radio" value="3" ng-model="radioValue" name="radioExample"> 

http://plnkr.co/edit/gbZFgKJbJyEBdgB9jXho?p=preview

モデルとするとき、モデル値の変更、削除/属性を追加することができます属性「確認」との差異を調整します。

+0

に文字列の変更で、それは(IE 11、バージョン11.842.10586.0、更新バージョン11.0.40)私のために働いていません – kalthir

0

ng-valueで試してください。 $scope.radioValue = "1";データ型が$scope.radioValue = 1;今これを試してみた

var app = angular.module('myApp', []); 
 
app.controller('formCtrl', function($scope) { 
 
    $scope.firstname = ""; 
 
    $scope.radioValue = 1; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<body> 
 
<div ng-app="myApp" ng-controller="formCtrl"> 
 
    <form> 
 
    <input type="text" ng-model="firstname"> 
 
    <br/> 
 
    <input type="radio" data-ng-model="radioValue" data-ng-value="1" name="radioExample"> 
 
    <input type="radio" data-ng-model="radioValue" data-ng-value="2" name="radioExample"> 
 
    <input type="radio" data-ng-model="radioValue" data-ng-value="3" name="radioExample"> 
 
    <br/> 
 
    <input type="text" ng-model="firstname"> 
 
    
 
    </form> 
 
</div> 
 
</body>

関連する問題