I am looking to modify a float label script that currently works for input boxes in order to make it work for textareas. I attempted to add $fields.on("textarea", floatLabel) to the script but it did not produce the desired result. Any suggestions or assistance on this issue?
(function($){
var $fields = $(".floatLabel");
// when data is entered...
$fields.on("input", floatLabel);
$fields.on("textarea", floatLabel);
// Check the text fields as soon as the document loads for data that
// may have been added upon load
floatLabel();
function floatLabel(){
$fields.each(function(i, f){
var $field = $(f);
if($field.val().trim() === "" || $field.val() === "blank"){
$field.next().removeClass("active");
} else {
$field.next().addClass("active");
}
});
}
})(jQuery);
CSS
.controls label.active {
position:relative;
top: -50px;
left:-175px;
color: #555;
background-color: white;
}
.controls label {
position: relative;
top:0px;
left:-175px;
color: #999;
font-size: 18px;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
margin: 0;
font-weight: 400;
background-color: rgba(255, 255, 255, 0);
pointer-events: none;
transition: color 0.3s, top 0.3s, background-color 0.8s;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-row">
<div class="field-wrap">
<div class="controls">
<input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required>
<label for="property_address">Street Address</label>
</div>
</div>
<div class="two-row">
<div class="field-wrap">
<div class="controls">
<textarea name="comments" class="floatLabel">value="<?php echo $comments?>"</textarea>
<label for="comments"></label>
</div>
</div>
</div>
</div>