почему «<input type =» number «/>» нельзя редактировать в chrome с угловым 1.4.6

Question

почему «<input type =» number «/>» нельзя редактировать в chrome с угловым 1.4.6

0

Я использовал угловое-1.4.6 для своего проекта. Я пишу ссылку на код ниже: "html файл":

<!DOCTYPE html>
<html>
<head>
<title>退货向导</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/freshfresh_web/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="/freshfresh_web/static/lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<link href="/freshfresh_web/static/lib/jquery-ui/jquery-ui.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="/freshfresh_return/static/src/css/return.css"></link>
<link rel="stylesheet" href="/freshfresh_return/static/src/css/angular-block-ui.css"></link>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular-block-ui.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/angular-jsonrpc.js"></script>
<script type="text/javascript" src="/freshfresh_return/static/src/js/return.js"></script>

</head>
<body ng-app="freshfresh_return">
  <div ng-controller="PickingCtrl" class="container">
    <div class="pull-right">
      <a href="/web/session/logout" class="btn btn-defualt" style="margin-top: 8px;">登出</a>
    </div>

    <div class="row">

      <!-- left content -->
      <div class="col-xs-3">
        <div class="row">
          <div class="col-xs-12">
            <h3>扫描出库单</h3>
          </div>
        </div>
        <p class="text-danger" id="error-msg" style="display: none">出库单号错误</p>
        <div class="row">
          <dir class="col-xs-12">
            <input type="text" my-enter="get_picking_obj()" autofocus id="picking_id" ng-model='picking_id' placeholder="出库单号" class="form-control" />
          </dir>
        </div>

        <div class="row">
          <div class="col-md-offset-1 col-md-11">
            <form class="form-horizontal">
              <div class="form-group" ng-repeat='field in res_obj.pick_obj'>
                <label class="control-label">{{ field[0] }}</label>
                <div>
                  <input type="text" disabled="disabled" value="{{ field[1] }}" />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- left content -->

      <!-- right-content -->
      <div class="col-xs-9">
        <table class="table table-striped table-hover" id="return_list">
          <caption>包裹信息</caption>
          <thead>
            <tr>
              <td><input type="checkbox" id="check_all" ng-model="check_all" /></td>
              <td>产品</td>
              <td>数量</td>
              <td>计量单位</td>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="move in move_list">
              <td><input type="checkbox" ng-checked="check_all" ng-model='move.selected' /></td>
              <td>{{ move.product_name }}</td>
              <td><input type="number" max="{{ move.qt_max }}" step="any" min="0" ng-model='move.quantity' /></td>
              <td>{{ move.product_uos}}</td>
            </tr>
          </tbody>
        </table>
        <input type="button" class="btn btn-primary btn-large" ng-disabled="!(picking_id && res_obj)"  ng-click="create_return()" value="同步" />
        <p class="text-danger" id="req-success-msg" style="display: none">请求成功</p>
      </div>
      <!-- right-content -->

    </div>
  </div>
</body>
<script type="text/javascript" src="/freshfresh_web/static/lib/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/freshfresh_web/static/lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/freshfresh_web/static/lib/freshfresh/freshfresh.js?version=00004"></script>
<script type="text/javascript" src="/freshfresh_tms/static/src/js/datepickerCN.js"></script>
</html>

и код return.js следующим образом:

var utilsApp = angular.module('utils.fresh', []);

utilsApp.directive('autofocus', ['$timeout', function($timeout){
    return {
        'restrict': 'A',
        link: function($scope, $element){
            $timeout(function(){
                $element[0].focus();
                $element[0].onblur = function(){
                    this.focus();
                }
            });
        }
    }
}]);

utilsApp.directive('myEnter', function(){
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event){
            if (event.which === 13){
                element.val('')
                scope.$apply(function(){
                    scope.$eval(attrs.myEnter)
                });

                event.preventDefault();
            }
        });
    }
});

var freshApp = angular.module("freshfresh_return", ['utils.fresh', 'blockUI']);

freshApp.config(function(blockUIConfig) {
  blockUIConfig.message = "加载中..."
});

freshApp.controller('PickingCtrl', ['$scope', '$http', 'blockUI', function($scope, $http, blockUI){

  $scope.get_picking_obj = function(){
    url = '/freshfresh_return/load_pick/' + $scope.picking_id;
    blockUI.start();
    $http.get(url).then(
        function(response){
          $scope.res_obj= response.data;
          $scope.pick_obj = $scope.res_obj.pick_obj;
          $scope.move_list = $scope.res_obj.product_return_moves;
          $scope.pick_id = $scope.res_obj.pick_id;
          for (var index = 0; index < $scope.move_list.length; index++){
              $scope.move_list[index].qt_max = $scope.move_list[index].quantity;
          }
          blockUI.stop();
          console.log("get picking obj success");
        },
        function(response){
          blockUI.stop();
          $('#error-msg').fadeIn('slow', function(){
            $(this).delay(1000).fadeOut('slow');
          });
          console.log("get picking obj error");
        });
  };

  $scope.create_return = function(){
    if (!$scope.pick_id) {
        console.log("error, not found the pick id.");
        return false;
    }
    url = '/freshfresh_return/create_return/' + $scope.pick_id;
    data = [];
    for (var index = 0; index < $scope.move_list.length; index++){
        if ($scope.move_list[index].selected){
            data.push({
                'move_id': $scope.move_list[index].move_id,
                'quantity': $scope.move_list[index].quantity,
            });
        }
    }
    console.log(JSON.stringify(data));
    blockUI.start();
    $.ajax({
        url: url,
        data: JSON.stringify({'data': data}),
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        traditional: true,
        success: function(data){
            blockUI.stop();
            if (data.result.success){
                console.log("请求成功");
                $('#req-success-msg').fadeIn('slow', function(){
                    $(this).delay(1000).fadeOut('slow');
                });
                return
            }
            console.log("fails")
            console.log(data)
            alert(data)
        },
        failure: function(data){
            blockUI.stop();
            console.log(data)
        }
    });
  };

}]);

поле не редактировалось. Я попытался установить step = "any", но все равно не работает. поэтому я попробовал написать демо-html вот так:

<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../bower_components/angular/angular.js"></script>
  <script type="text/javascript">
    var testapp = angular.module('test', []);

    var tc = testapp.controller('test', ['$scope', function($scope){
      $scope.age = 14
$scope.move_list = [
{'product_name': '苹果', 'qt_max': 20, 'quantity': 20, 'product_uos': '件'},
{'product_name': '香蕉', 'qt_max': 30, 'quantity': 30, 'product_uos': '千克'},
];
      $scope.data = [{'name': 'teacher', 'age': 12}, {'name': 'std', 'age': 14}];
      console.log("hello");
    }]);
  </script>
</head>
<body ng-controller="test">
  <form action="">
    <div ng-repeat="d in data">
      <input type="text" ng-model="d.name" />
      <input type="number" max='50' ng-model="d.age" min='10'/>
    </div>

    <input type="submit" value="提交" />
  </form>
  <div class="col-xs-9">
    <table class="table table-striped table-hover" id="return_list">
      <caption>包裹信息</caption>
      <thead>
        <tr>
          <td><input type="checkbox" id="check_all" ng-model="check_all" /></td>
          <td>产品</td>
          <td>数量</td>
          <td>计量单位</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="move in move_list">
          <td><input type="checkbox" ng-checked="check_all" ng-model='move.selected' /></td>
          <td>{{ move.product_name }}</td>
          <td><input type="number" max="{{ move.qt_max }}" step="any" min="0" ng-model='move.quantity' /></td>
          <td>{{ move.product_uos}}</td>
        </tr>
      </tbody>
    </table>
</body>
</html>

но демонстрация работает хорошо. ввод номера может быть изменен и подтвержден. но проект не может работать. код был таким же. и угловой обе версии 1.4.6, так что я действительно запутался, что заставило это произошло?

hackrole 29 сен. 2015, в 06:22

Источник

Теги:

javascript

html

angularjs

html5

google-chrome

1 ответ

Ещё вопросы

hackrole · Answer 1 · 2015-09-29T04-13-00.000Z

извините за это, я установил директиву автофокуса, которая всегда фокусирует этот первый вход. поэтому другие элементы не могут получить фокус. это не угловая проблема, просто моя ошибка.