Menu
Created a form which allows the placeholders in a textarea move up on click, trying to get the text area to increase in height by 1 row with every line break but in my javascript function im not too sure on what to include in the if statement to check if there is a line break :
//function SetNewSize(textarea) {
// if (textarea.value.length > 106) {
// textarea.cols += 1;
// textarea.rows += 1;
// } else {
// textarea.cols = 2;
// textarea.rows = 2;
// }
//}
function SetNewSize(textarea) {
if (textarea.rows > 1) {
textarea.rows += 1;
} else {
textarea.rows = 2;
}
}*,
*:before,
*:after {
box-sizing: border-box;
}
body {
width: 100%;
min-height: 300px;
}
form {
width: 600px;
margin: 2em auto;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 22px;
}
form legend {
font-size: 2em;
margin-bottom: 1em;
width: 100%;
border-bottom: 1px solid #ddd;
}
.float-label .control {
float: left;
position: relative;
width: 100%;
border-bottom: 1px solid #ddd;
padding-top: 23px;
padding-bottom: 10px;
}
.float-label .control.small {
width: 30%;
border-right: 1px solid #ddd;
}
.float-label .control.medium {
width: 70%;
padding-left: 10px;
}
.float-label .control:last-child {
border: 0;
}
.float-label input,
.float-label textarea {
display: block;
width: 100%;
border: 0;
outline: 0;
resize: none;
}
.float-label input+label,
.float-label textarea+label {
position: absolute;
top: 10px;
transition: top 0.7s ease, opacity 0.7s ease;
opacity: 0;
font-size: 13px;
font-weight: 600;
color: #ccc;
}
.float-label input:valid+label,
.float-label textarea:valid+label {
opacity: 1;
top: 3px;
}
.float-label input:focus+label,
.float-label textarea:focus+label {
color: #2c8efe;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form class="float-label" spellcheck="false">
<legend>Float Label Demo</legend>
<!-- we need a wrapping element for positioning the label -->
<!-- the required attribute is ... required! -->
<div class="control" contenteditable>
<textarea name="description" id="myTextArea" onKeyUp="SetNewSize(this);" placeholder="Description" required></textarea>
<label for="title">Title</label>
</div>
<div class="control">
<textarea name="description" placeholder="Description" required></textarea>
<label for="price">Price</label>
</div>
<div class="control">
<textarea name="description" placeholder="Description" required></textarea>
<label for="description">Description</label>
</div>
</form>
</body>
</html>
509
asked Nov 02 '25 18:11
You can just count the line breaks with split, and splitting on \n..
Also, to stop the scrollbar flicker, just put overflow-y: hidden on the textarea seen as were making it bigger.
Edit: Ok, another idea.. Instead of altering rows, just alter the height of element, we can get the required height from textarea.scrollHeight..
eg..
function SetNewSize(textarea) {
textarea.style.height = "0px";
textarea.style.height = textarea.scrollHeight + "px";
}*,
*:before,
*:after {
box-sizing: border-box;
}
body {
width: 100%;
min-height: 300px;
}
form {
width: 600px;
margin: 2em auto;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 22px;
}
form legend {
font-size: 2em;
margin-bottom: 1em;
width: 100%;
border-bottom: 1px solid #ddd;
}
.float-label .control {
float: left;
position: relative;
width: 100%;
border-bottom: 1px solid #ddd;
padding-top: 23px;
padding-bottom: 10px;
}
.float-label .control.small {
width: 30%;
border-right: 1px solid #ddd;
}
.float-label .control.medium {
width: 70%;
padding-left: 10px;
}
.float-label .control:last-child {
border: 0;
}
.float-label input,
.float-label textarea {
display: block;
width: 100%;
border: 0;
outline: 0;
resize: none;
}
.float-label input + label,
.float-label textarea + label {
position: absolute;
top: 10px;
transition: top 0.7s ease, opacity 0.7s ease;
opacity: 0;
font-size: 13px;
font-weight: 600;
color: #ccc;
}
.float-label input:valid + label,
.float-label textarea:valid + label {
opacity: 1;
top: 3px;
}
.float-label input:focus + label,
.float-label textarea:focus + label {
color: #2c8efe;
}
textarea {
overflow-y: hidden;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form class="float-label" spellcheck="false">
<legend>Float Label Demo</legend>
<!-- we need a wrapping element for positioning the label -->
<!-- the required attribute is ... required! -->
<div class="control" contenteditable>
<textarea name="description" id="myTextArea" onKeyUp="SetNewSize(this);" placeholder="Description" required></textarea>
<label for="title">Title</label>
</div>
<div class="control" >
<textarea name="description" placeholder="Description" required onKeyUp="SetNewSize(this);" ></textarea>
<label for="price">Price</label>
</div>
<div class="control">
<textarea name="description" placeholder="Description" required onKeyUp="SetNewSize(this);" ></textarea>
<label for="description">Description</label>
</div>
</form>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
