Saya cuba membuat kawasan teks yang mudah dikembangkan secara automatik. Ini kod saya:
textarea.onkeyup = function () { textarea.style.height = textarea.clientHeight + 'px'; }
Tetapi kawasan teks berkembang tanpa had semasa anda menaip...
Saya tahu terdapat pemalam Dojo dan jQuery untuk ini, tetapi saya tidak mahu menggunakannya. Saya melihat pelaksanaannya dan pada asalnya menggunakanscrollHeighttetapi melakukan perkara yang sama.
Anda boleh mula menjawab dan menggunakan kawasan teks untuk memainkan jawapan anda.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya mahu kawasan yang berkembang secara automatik dihadkan oleh bilangan baris (cth. 5 baris). Saya mempertimbangkan untuk menggunakan unit "em", untukpenyelesaian Rob, bagaimanapun, inirawan ralatdan tidak mengambil kira perkara seperti pelapik.
Ini yang saya fikirkan:
var textarea = document.getElementById("textarea"); var limitRows = 5; var messageLastScrollHeight = textarea.scrollHeight; textarea.oninput = function() { var rows = parseInt(textarea.getAttribute("rows")); // If we don't decrease the amount of rows, the scrollHeight would show the scrollHeight for all the rows // even if there is no text. textarea.setAttribute("rows", "1"); if (rows < limitRows && textarea.scrollHeight > messageLastScrollHeight) { rows++; } else if (rows > 1 && textarea.scrollHeight < messageLastScrollHeight) { rows--; } messageLastScrollHeight = textarea.scrollHeight; textarea.setAttribute("rows", rows); };Fiddle:http://jsfiddle.net/cgSj3/
Sedang digunakan
scrollHeight正确扩展/收缩文本区域之前重置高度。Math.min()boleh digunakan untuk menetapkan had ketinggian kawasan teks.Kod:
var textarea = document.getElementById("textarea"); var heightLimit = 200; /* Maximum height: 200px */ textarea.oninput = function() { textarea.style.height = ""; /* Reset the height*/ textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px"; };Fiddle:http://jsfiddle.net/gjqWy/155
Nota:acara
inputtidak disokonginput事件IE8 及更早版本不支持。如果您也想支持这个古老的浏览器，请使用keydown或keyup以及onpaste和/或oncutdalam IE8 dan lebih awal. Jika anda juga ingin menyokong penyemak imbas purba ini, sila gunakankeydownataukeyupdanonpastedan/atauoncut.