有没有办法让一个文本框自动扩展没有jQuery？

问题描述：

我已经设置调整为垂直，但我希望当用户填充文本框，然后其大小扩大了。有没有什么办法可以在不使用jQuery等外部库的情况下完成？有没有办法让一个文本框自动扩展没有jQuery？

的[根据字符进入它动态地增加输入类型的文本的文本框宽度]可能的复制（http://*.com/questions/20727692/dynamically-increase-input-type -text-textbox-width-according-the-characters-e） –

差不多。但是这里OP要它垂直扩展 – jonju

Javascript是允许的吗？ – tewathia

答

这已经在这里已经回答：Creating a textarea with auto-resize

<!DOCTYPE html> 
<html> 
<head> 
<title>autoresizing textarea</title> 
<style type="text/css"> 
textarea { 
    border: 0 none white; 
    overflow: hidden; 
    padding: 0; 
    outline: none; 
    background-color: #D0D0D0; 
    resize: none; 
} 
</style> 
<script type="text/javascript"> 
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'; 
    } 
    /* 0-timeout to get the already changed text */ 
    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(); 
} 
</script> 
</head> 
<body onload="init();"> 
<textarea rows="1" style="height:1em;" id="text"></textarea> 
</body> 
</html>

例子：https://jsfiddle.net/hmelenok/WM6Gq/

现金去端盘子，他投在这里：https://*.com/a/5346855/1540350

答

只有在CSS和contentEditable="true"属性。

div { 
display:inline-block; 
border: solid 1px #000; 
min-height: 200px; 
width: 300px; 
}

Demo Here

有没有办法让一个文本框自动扩展没有jQuery？

相关推荐