概括:
文本区域中的行数乘以行高，与 textarea 元素的高度不一样，这是为什么？
细节
我正在开发一个函数来调整 AngularJs 指令中 textarea 元素的大小，我找到的答案将其作为链接函数中解决方案的主要内容:
angular.module('auto.resize', []).directive('autoResize', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function link(scope, elm) {
const resize = function() {
elm[0].style.height = elm[0].scrollHeight + "px";
}
elm.on("blur keyup change", resize);
$timeout(resize);
}
}
}]);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
</head>
<body>
<div>
<textarea auto-resize></textarea>
</div>
</body>当您添加额外的行，然后在除底线之外的任何内容上键入时，这并不像我希望的那样工作，它会慢慢缩小小于行高的量。
我的修复是这样的:
angular.module('auto.resize', []).directive('autoResize', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function link(scope, elm) {
const resize = function() {
const lines = elm[0].value.split("\n").length;
const lineHeight = parseInt(getComputedStyle(elm[0]).lineHeight.match(/(\d+)/)[1];
elm[0].style.height = lines * lineHeight + "px";
}
elm.on("blur keyup change", resize);
$timeout(resize);
}
}
}]);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
</head>
<body>
<div>
<textarea auto-resize></textarea>
</div>
</body>这会自我纠正，以免不必要地调整大小，但是，我的问题是
lines * lineHeight 与 scrollHeight 不同，似乎有一些填充，我无法猜测。我如何在两者之间映射？
最佳答案
元素的 scrollHeight 会留下一些额外的填充(除了元素的实际 padding 之外)，以便为文本中的任何上升或下降腾出空间。这将根据特定的字体指标而有所不同:
console.log($('#a').prop('scrollHeight'))
console.log($('#b').prop('scrollHeight'));div {
padding: 0;
line-height: 10px;
white-space: pre-wrap; /* simulate textarea handling */
}
#a {font-family: serif}
#b {font-family: monospace}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">one
two
three</div>
<div id="b">one
two
three</div>您在 this question's accepted answer 中使用的方法中描述的“收缩”行为可能与同一问题有关。这可以通过使用元素的
innerHeight 而不是 scrollHeight 来纠正——innerHeight 确实匹配行高乘以行数(只要没有任何文本换行。)关于javascript - 为什么 scrollHeight 与 textarea 中的 lineHeight * 行不同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44888617/