4 回答
我改进了 Windkiller 的小提琴。
我包含了一个调试器 div,它演示了使用选定元素的数据属性来存储和检索数据而不影响 DOM。
如果最后一个字符长度大于当前字符长度的事件(即“输入”),则为高度分配初始高度的大小,然后分配滚动高度的值。
在这个示例中,我还使用了“em”单元。
此外,我在 css 样式中添加(声明)了一个 line-height,并特别声明了 overflow-x。
HTML
<textarea class="inputField" style="height:2em;font-size: 19px;" id="inputField" placeholder="Type your message"></textarea>
<div id='debugger'>
<div>0 current characters</div>
<div>0 last characters</div>
</div>
jQuery
$('#inputField').data('lastCharCount', 0);
$('#inputField').bind('input', function (e) {
$(this).data('CharCount', e.target.value.length);
$('#debugger').html('<div>' + $(this).data('CharCount') + ' current character(s)</div>');
if (e.target.clientHeight >= 350 && e.target.style.overflowY != "scroll") {
e.target.style.overflowY = "scroll";
} else if (e.target.clientHeight < 350) {
e.target.style.overflowY = "hidden";
}
if ($(this).data('CharCount') > $(this).data('lastCharCount')) {
e.target.style.height = ((e.target.scrollHeight) / e.target.style.fontSize.replace('px', '')) + "em";
/* A change in character length occurred */
} else if ($(this).data('CharCount') < $(this).data('lastCharCount')) {
e.target.style.height = '2em';
e.target.style.height = ((e.target.scrollHeight + 1) / e.target.style.fontSize.replace('px', '')) + "em";
/* A change in character length occurred */
} else {
/* No change in character length occurred. Possible character replaced */
}
$('#debugger').append('<div>' + $(this).data('lastCharCount') + ' last character(s)</div>');
$(this).data('lastCharCount', $(this).data('CharCount'));
});
CSS
body {
font-size:14px;
}
.inputField {
-ms-grid-row: 2;
-ms-grid-column: 2;
min-height: 2em;
max-height: 350px;
overflow: hidden;
overflow-x:hidden;
padding:0em;
line-height:1em;
}
jsFiddle:http: //jsfiddle.net/GREM9/8/
我自己做了一些测试。不幸的是我没有Win8.1,我只有Win8。
所以我在 chrome 和 Win8 上的 IE10 中测试了这个,一切都很奇怪!无论如何,如果我设置e.target.style.height = (e.target.scrollHeight - 18) + "px";
得更接近font-size
,它开始表现得更合理。
现在它以某种方式在 chrome、firefox 和 IE10 (Win8) 中工作。
这是 jsfiddle,所以所有人都可以查看:http: //jsfiddle.net/GREM9/7/
所以你可以在Win8.1中查看它,也许它对你有好处,足以保留它。
我注意到适用于 Windows 8 的 javascript 可能会导致 css 之间发生大量冲突。我正在开发一个应用程序,其中一半时间我只是尝试修复由冲突的 css 或全局变量引起的视觉错误。您是否使用各种 css 文件并在它们之间声明相似的名称?(例如,假设您在其中声明了带有 .inputField 的 file1.css,并且在此页面中您已声明了带有不同属性的 file2.css 和.inputField)
我将创建一个添加溢出滚动的类,而不是使用您的 Javascript 代码。
然后使用 jquery 检查文本区域的高度,当达到最大高度时添加类以使文本区域溢出滚动。
乍一看,代码应该更容易理解。
例如
if ($('textarea').height => 350) { $('textarea').addClass('overflowY');}
希望这可以解决您的问题。哦,删除高度并将其更改为min-height:30px;