Question

我希望用户能够输入一个问题的多个答案，因此我会在用户添加更多答案时增加文本输入的重复次数。

这在chrome中运行良好，但在safari中，最后一个元素会在添加后立即窃取焦点，并在几个输入中传播快速输入用户的答案。

在iOS Safari中，情况更糟，因为它导致浏览器挂起。

以下是表单的代码

<form class="form-horizontal sparse" 
        ng-controller="AssessmentController as assessment">
    <fieldset>
        <div class="form-group alt-uses-list" ng-repeat="response in answer.responses">
            <label for="answer{{$index}}" class="col-xs-1 control-label">{{$index + 1}}.</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" 
                    id="response.uses{{$index}}"
                    autocomplete="off" tabIndex="{{$index + 1}}" 
                    autofocus="{{$first}}" ng-model="response.value"
                    ng-change="assessment.addAnswerIfNeeded()">
            </div>
        </div>
    </fieldset>
</form>

这是控制器

function AssessmentController($scope, $log) {
    $scope.answer = {};
    $scope.answer.responses = [{id:0, value:""},{id:1, value:""}];

    this.addAnswerIfNeeded = addAnswerIfNeeded;

    // Add answer if the last two answers are non-empty
    function addAnswerIfNeeded() {
      var answers = $scope.answer.responses;

      if ((answers[answers.length - 1].value != '') || 
          (answers[answers.length - 2].value != '')) {
        addAnswer();
      }
    }

    // Adds a new answer if this is the last element
    // isLast is needed to prevent non-lazy evaluation bugs
    function addAnswer() {
        $scope.answer.responses.push({
             id:$scope.answer.responses.length, value: ""
        });
    };
}

我创建了jsfiddle。

Answer 1

autofocus属性是Boolean类型。

根据this link：

如果需要，作为第一个参数传递的值将转换为布尔值。如果省略value或者为0，-0，null，false，NaN，undefined或空字符串（＆＃34;＆＃34;），则对象的初始值为false。所有其他值，包括任何对象或字符串＆＃34; false＆＃34;，都会创建一个初始值为true的对象。

不要将原始布尔值true和false与布尔对象的真值和假值混淆

autofocus="{{$first}}"会在autofocus="false"中不是第一项的任何项目上生成ng-repeat。如链接状态

所有其他值，包括任何对象或字符串＆＃34; false＆＃34; ，都会创建一个初始值为 true 的对象。

如果您可以更新到包含ng-attr指令的角度JS版本，您可以将代码更新为以下内容，我已更新您jsfiddle以显示实际示例

<form class="form-horizontal sparse" ng-controller="AssessmentController as assessment">
  <fieldset>
    <div class="form-group alt-uses-list" ng-repeat="response in answer.responses">
      <label for="answer{{$index}}" class="col-xs-1 control-label">{{$index + 1}}.</label>
      <div class="col-xs-10">
        <input type="text" class="form-control" id="response.uses{{$index}}" autocomplete="off" tabIndex="{{$index + 1}}" ng-attr-autofocus="{{$first||undefined}}" ng-model="response.value" ng-change="assessment.addAnswerIfNeeded()">
      </div>
    </div>
  </fieldset>
</form>

当ng-attr-autofocus="{{$first||undefined}}"评估为false时，autofocus属性的值为undefined，因此autofocus会从dom中删除。

在ng-repeat中动态添加输入会导致最后一个元素在safari中窃取焦点

1 个答案: