我编写了这个简单的函数,它工作正常,但我正在努力让它变得更好一点。
我有一个文本区域,它会在滚动高度发生变化时调整大小,问题是当我按下回车键(即向下一行 -\n)时,高度会随着它的更新而跳变,因为滚动高度仅在文本出现后才会更新进入。
现在我已经用 css overflow:hidden
解决了它,但它并不完美......我也试图捕捉输入事件,但这是有问题的,因为高度变化太快...
这是一个jsfiddle有问题的代码。
JS:
var app = angular.module('myModule', []);
app.controller('myCtrl', function ($scope, $timeout) {
$scope.ModelData = "";
$scope.modelScrollHeight = document.getElementById('textareaId').scrollHeight;
$scope.getScrollHeight = function(){
$scope.modelScrollHeight = document.getElementById('textareaId').scrollHeight;;
return $scope.modelScrollHeight;
}
});
HTML:
<div ng-controller = "myCtrl">
<div class="omeromer" style="" >
<textarea
ng-style="{'min-height':(!ModelData || ModelData.trim() === '') ? '40px' : modelScrollHeight+'px'}"
style="border: none;resize:none;border-color: #EFEFEF; "
ng-model="ModelData" ng-change="getScrollHeight()" id="textareaId" class="wm-noteList-text-overflow"
> </textarea>
<pre>"val: "{{ModelData|json}}</pre>
<pre>"split "{{ModelData.split('\n').length - 1|json}}</pre>
<pre>"length: "{{ModelData.length|json}}</pre>
<pre>"scrollHeight: "{{modelScrollHeight|json}}</pre>
</div>
</div>
CSS:
.wm-noteList-text-overflow{
width:200px;
//overflow:hidden;
}
最佳答案
如何将调整大小函数放在 Angular 的内部 $formatters
数组中?
A jsfiddle
app.directive('autoHeight', function () {
return {
require : '?ngModel',
restrict: 'A',
link : function (scope, element, attrs, ngModel) {
var node = element[0];
function refresh () {
node.style.height = null;
node.style.height = node.scrollHeight + 'px';
}
if (ngModel) {
ngModel.$formatters.push(function (value) {
refresh();
return value;
});
}
element.on('input', refresh);
refresh();
}
};
});
关于javascript - textarea 高度等于 scrollheight 流问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36196980/