角度材料 - Long Textarea Forces滚动到顶部

时间:2015-06-13 04:07:08

标签: angularjs angular-material

我在使用文本区域和Angular Material时遇到了一些困难。

如果文本区域中有足够的内容强制底部“折叠”,则键入会导致页面滚动到顶部。继续键入滚动页面并立即向上滚动。

这是ngMaterial中的错误,还是我在这里做错了什么?

(我多次查看文档,试图查看我是否做错了。)

我正在使用的代码,删除了任何不必要的内容:

angular.module('TestTextarea', [
  'ngMaterial'
])

.controller('AppController', function($scope) {
  $scope.level = {
    title: '',
    content: 'asdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\nasdfasdf\n'
  };
});
<!DOCTYPE html>
<html ng-app="TestTextarea">

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
</head>

<body ng-controller="AppController">
  <md-content layout-padding layout="column" flex="30">
    <form novalidate flex>
      <div layout>
        <md-input-container flex>
          <label for="title">Title</label>
          <input name="title" id="title" ng-model="level.title" ng-model-options="{ debounce: 500 }" />
        </md-input-container>
      </div>

      <div layout>
        <md-input-container flex>
          <label for="html">Content</label>
          <textarea name="html" id="html" ng-model="level.content" columns="1" ng-model-options="{ debounce: 500 }"></textarea>
        </md-input-container>
      </div>
    </form>
  </md-content>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

  <script src="script.js"></script>
</body>

</html>

0 个答案:

没有答案