我在使用文本区域和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>