Creating a textarea with auto-resize
This works for me (Firefox 3.6/4.0 and 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'; } /* 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();}textarea { border: 0 none white; overflow: hidden; padding: 0; outline: none; background-color: #D0D0D0;}<body onload="init();"><textarea rows="1" style="height:1em;" id="text"></textarea></body>How to auto resize the textarea to fit the content?
addEventListener here is redundant since valueChanges already notifies you when the field changes. Instead, update the height using the ViewChild reference myDiv.
this.myForm.valueChanges.subscribe(value => {
this.myDiv.nativeElement.style.height = 'auto';
this.myDiv.nativeElement.style.height = `${this.myDiv.nativeElement.scrollHeight}px`;
});
Then add overflow: hidden to your css so the scrollbar doesn't show.
textarea {
resize: horizontal;
overflow: hidden;
}
You can keep the resize: horizontal; but it is no longer required since the textarea will resize automatically anyway.
Here is a working example on StackBlitz.
HTML TextArea resize automatically
Resizing TeaxArea based on the content line number. Here's a DEMO
JS
function resizeTextarea (id) {
var a = document.getElementById(id);
a.style.height = 'auto';
a.style.height = a.scrollHeight+'px';
}
function init() {
var a = document.getElementsByTagName('textarea');
for(var i=0,inb=a.length;i<inb;i++) {
if(a[i].getAttribute('data-resizable')=='true')
resizeTextarea(a[i].id);
}
}
addEventListener('DOMContentLoaded', init);
HTML
<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>
Creating a textarea with auto-resize width and constant height
I think the best solution is to actually use contenteditable="true" like you mentioned.
Something like this should work:
<form action="/form" method="POST" onsubmit="return copyValues()" style="margin-top: 100px;">
<p>
My name is <span contenteditable="true" id="name">enter name</span> and I come from a village called <span contenteditable="true" id="village">enter name</span>
. Everybody from the village of <span contenteditable="true" id="otherVillageName"></span> knows that my name is <span contenteditable="true" id="pseudonym">enter name</span>
</p>
<p>
<input type="hidden" id="nameInput" name="name" />
<input type="hidden" id="villageInput" name="village" />
<input type="hidden" id="otherVillageInput" name="otherVillage" />
<input type="hidden" id="pseudonymInput" name="pseudonym" />
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
function copyValues () {
document.getElementById("nameInput").value =
document.getElementById("name").innerHTML;
document.getElementById("villageInput").value =
document.getElementById("village").innerHTML;
document.getElementById("otherVillageInput").value =
document.getElementById("otherVillage").innerHTML;
document.getElementById("pseudonymInput").value =
document.getElementById("pseudonym").innerHTML;
return true;
}
</script>
Note: the user will have to select and delete the text, for that you can add an onfocus="clearPlaceholder(this)" which will pass the element to a function where you can check if the innerHTML is "enter name" and clear it, however it's a bit fiddly and out of the scope of this question.
Textarea Auto height
It can be achieved using JS. Here is a 'one-line' solution using elastic.js:
$('#note').elastic();
Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Jack Moore. This is the working example:
autosize(document.getElementById("note"));textarea#note { width:100%; box-sizing:border-box; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D);}<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script><textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>Related Topics
Using Html5/Canvas/JavaScript to Take In-Browser Screenshots
How to Read CSS Rule Values With JavaScript
Get Class List For Element With Jquery
Do Html5 Custom Data Attributes "Work" in Ie 6
Insert Ellipsis (...) into HTML Tag If Content Too Wide
How to Change Div Content With JavaScript
Capture Key Press (Or Keydown) Event on Div Element
Detecting If a Browser Is Using Private Browsing Mode
JavaScript Code to Stop Form Submission
How to Know Which Radio Button Is Selected Via Jquery
How to Make a ≪Button≫ Not Submit a Form
Jquery/JavaScript Collision Detection
JavaScript: How to Find Out If the User Browser Is Chrome
Detect Which Word Has Been Clicked on Within a Text