JavaScript创建具有自动调整大小的文本区域

JavaScript创建具有自动调整大小的文本区域,第1张

JavaScript创建具有自动调整大小的文本区域

这对我有效(Firefox 3.6 / 4.0和Chrome 10/11):

var observe;if (window.attachEvent) {    observe = function (element, event, handler) {        element.attachEvent('on'+event, handler);    };}else {    observe = function (element, event, handler) {        element.addEventListener(event, handler, false);    };}function init () {    var text = document.getElementById('text');    function resize () {        text.style.height = 'auto';        text.style.height = text.scrollHeight+'px';    }        function delayedResize () {        window.setTimeout(resize, 0);    }    observe(text, 'change',  resize);    observe(text, 'cut',     delayedResize);    observe(text, 'paste',   delayedResize);    observe(text, 'drop',    delayedResize);    observe(text, 'keydown', delayedResize);    text.focus();    text.select();    resize();}textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    background-color: #D0D0D0;}<body onload="init();"><textarea rows="1"  id="text"></textarea></body>

如果您想在jsfiddle上尝试它,它以一行开始,并且仅增长所需的确切数量。可以使用一个

textarea
,但是我想写一些这样
textarea
的东西(在一个大的文本文档中通常有几行)。在那种情况下,它真的很慢。(在Firefox中,它是如此之慢。)因此,我真的很想使用纯CSS的方法。使用,这是可能的
contenteditable
,但是我希望它只能是纯文本格式。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5147452.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-18
下一篇 2022-11-17

发表评论

登录后才能评论

评论列表(0条)

保存