灵活的高度<textarea>作为一个新的换行符
[英]flexible height of <textarea> as a new line breaks
问题描述
I haven't seen this done before but I'm hoping it can be done.
我以前从未见过这样做过，但我希望它可以做到。 I'm trying to have an automatic height of a textarea as text is written inside of it.当文本写入其中时，我正在尝试使文本区域具有自动高度。 As seen here...如这里所见...
http://i.stack.imgur.com/oxRfj.jpg http://i.stack.imgur.com/oxRfj.jpg
http://i.stack.imgur.com/XVzYT.jpg http://i.stack.imgur.com/XVzYT.jpg
Hopefully these images explain what I mean.希望这些图片能解释我的意思。 the second image is also showing its theoretical max height.第二张图片也显示了它的理论最大高度。
https://jsfiddle.net/nupk26Ly/ https://jsfiddle.net/nupk26Ly/
.text-f {
border: none;
border-bottom: #183A4C solid 1px;
color: #183A4C;
font: 1rem/2.4rem Georgia, serif;
margin-top: 40px;
resize: none;
height: 40px;
width: 100%;
}
3 个解决方案
解决方案1
9 已采纳 2016-07-20 04:45:54
Here is a solution using jquery.这是使用jquery的解决方案。 Hope it helps.希望它有帮助。
function h(e) { $(e).css({'height':'40','overflow-y':'hidden'}).height(e.scrollHeight); } $('textarea').each(function () { h(this); }).on('input', function () { h(this); });
.text-f { border: none; border-bottom: #183A4C solid 1px; color: #183A4C; font: 1rem/2.4rem Georgia, serif; margin-top: 40px; height: 40px; width: 100%; } .form-btn { background: #183A4C; border: solid 1px #183A4C; color: #fff; cursor: pointer; display: block; font: 1rem/1.333rem Georgia, serif; height: 30px; width: 140px; margin: 10px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <textarea name="Message" class="text-f" placeholder="Describe your project..."></textarea> <button class="form-btn" type="button">Submit</button>
Pure Javascript solution (PS: I added an ID (textarea) to the textarea tag )纯Javascript解决方案（PS：我在textarea标签中添加了一个ID（textarea））
var textarea = document.getElementById("textarea"); textarea.oninput = function() { textarea.style.height = ""; /* textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px"; */ textarea.style.height = textarea.scrollHeight + "px" };
.text-f { border: none; border-bottom: #183A4C solid 1px; color: #183A4C; font: 1rem/2.4rem Georgia, serif; width: 100%; resize: none; height: 40px; }
<div id="content"> <div id="main-headline"> <h1 class="main-header">Fill out the form or contact me alternatively.</h1> </div> <!----- content ------> <div class="content-container"> <!----- row 1 ------> <section class="row"> <!----- form ------> <form name="contact-f" action="#" method="post"> <div class="col-3 c-right-col"> <textarea id="textarea" name="Message" class="text-f" placeholder="Describe your project..."></textarea> <button class="link-btn form-btn" type="button">Submit</button> </div> </form> </section> </div> </div>
解决方案2
3 2016-07-20 04:56:21
this is a an auto-expandable text area that i did a while ago, might work for you.这是我不久前做的一个自动扩展的文本区域，可能对你有用。 works on mobiles too也适用于手机
$(document) .one('focus.textarea', '.autoExpand', function(){ var savedValue = this.value; this.value = ''; this.baseScrollHeight = this.scrollHeight; this.value = savedValue; }) .on('input.textarea', '.autoExpand', function(){ var minRows = this.getAttribute('data-min-rows')|0, rows; this.rows = minRows; rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16); this.rows = minRows + rows; }); function updateTextbox(text) { $('#cagetextbox').val(text); //$('#cagetextbox').attr("rows", Math.max.apply(null, text.split("\\n").map(function(a){alert(a.length);return a.length;}))); }; updateTextbox("");
textarea{ display:block; box-sizing: padding-box; overflow:hidden; padding:10px; width:250px; font-size:14px; margin:50px auto; border-radius:8px; border:6px solid #556677; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <textarea id="cagetextbox" class='autoExpand' rows='3' data-min-rows='3' placeholder='Write here!! I expand!'></textarea> </body>
解决方案3
1 2016-07-20 05:14:55
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
console.log(this.scrollHeight , this.baseScrollHeight);
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
this.rows = minRows + rows;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.