PDA

View Full Version : Textarea!!



artheus
Mar 22nd, 2009, 02:00 AM
Hey!

I'm currently working on a project where I want to make textareas work as though they where div-tags with contenteditable="true".

So the textarea should be transparent, with visible text.. which is easily done with CSS:


background-color: transparent;
border: none;

But now my problem is to get the textarea to change height depending om how many lines there are written in the textarea, instead of having a fixed height and a scroll..

Cheers,
Artheus

Excavator
Mar 22nd, 2009, 02:23 AM
Hello artheus,
I have not messed with forms a lot... this looks like it might help you though - http://www.web-wise-wizard.com/html-tutorials/html-form-forms-textarea-wrap.html

effpeetee
Mar 22nd, 2009, 07:32 AM
We really do need your whole code.

Frank

_Aerospace_Eng_
Mar 22nd, 2009, 09:32 AM
Something like this should work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
textarea {
background:#F00;
border: none;
width:300px;
min-height:25px;
}
* html textarea {
height:25px;
}
</style>
<script type="text/javascript">
function changeHeight(what)
{
what.style.height = what.scrollHeight + 'px';
}
window.onload = function()
{
if(document.getElementById('content').text != '') changeHeight(document.getElementById('content'));
}
</script>
</head>

<body>
<form>
<textarea id="content" name="content" onKeyUp="changeHeight(this)"></textarea>
</form>
</body>
</html>

artheus
Mar 22nd, 2009, 12:47 PM
GRREAT HELP GUYS!

Thank you alot!

I've gotten it to work perfectly with the javascript versione changeHeight();

Only I added this


function changeHeight(what)
{
try {
if(parseInt(what.style.height) != parseInt(what.scrollHeight)) {
what.style.height = '25px';
what.style.height = what.scrollHeight + 'px';
}
} catch(e) {
alert(e);
}
};

So that the textarea would change size from bigger to smaller, too..

Thanks! :D

Cheers!