JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="testInput" placeholder="somethingPlease specify the name of Hotel and/or the address where you want to be dropped off. Please let us know the name of airline and number of the flight if drop-off is at an airport. You can let us know later if you do not know yet." /></textarea>
CSS
label.placeholder {
color:red;
font-family:arial;
/* hide the placeholder */
background-color:white;
/* align the label */
margin-top:0.1rem;
margin-left:0.1rem;
font-size:0.9rem;
}
label.hasValue, label.FocusNoValue {
/* hide the label when appropriate */
display:none !important;
}
JavaScript
(function ($) {
var default_options = {
labelClass: 'placeholder'
};
var ph = "PLACEHOLDER-INPUT";
var phl = "PLACEHOLDER-LABEL";
var boundEvents = false;
/*
//using custom placeholder for all browsers now: partials/_formBasics.scss
//check for browser support for placeholder attribute
var input = document.createElement("input");
if('placeholder' in input) {
$.fn.placeholder = $.fn.unplaceholder = function () { }; //empty function
delete input;
return;
};
delete input;
*/
$.fn.placeholder = function (options) {
bindEvents();
var opts = $.extend(default_options, options);
this.each(function () {
var rnd = Math.random().toString(32).replace(/\./, ''),
input = $(this),
label = $('<label style="position:absolute; z-index:100; "></label>');
if (!input.attr('placeholder') || input.data(ph) === ph) return;
//make sure the input tag has an ID assigned, if not, assign one.
if (!input.attr('id')) {
input.attr('id', 'input_' + rnd);
}
label.attr('id', input.attr('id') + "_placeholder").data(ph, '#' + input.attr('id')) //reference to the input tag
.attr('for', input.attr('id')).addClass(opts.labelClass).addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
.addClass(phl).text(input.attr('placeholder'));
input.data(phl, '#' + label.attr('id')) //set a reference to the label
.data(ph, ph) //set that the field is watermarked
.addClass(ph) //add the watermark class
.before(label); //add the label field to the page
itemOut.call(this);
});
//$('label').disableSelection();
};
$.fn.unplaceholder = function () {
this.each(function () {
var input = $(this),
...