<div class="textfield
textarea">
<label class="textfield__label " for="text1">
Textarea label </label>
<div class="textfield__inner">
<textarea class="textarea__field" id="text1" name="textarea"></textarea>
<span class="textfield__input textarea__input" contenteditable> </span>
<span class="textarea__placeholder">Placeholder text</span>
</div>
</div>
{% set input %}
<textarea
class="textarea__field"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
></textarea>
<span
class="textfield__input textarea__input"
contenteditable
> {{ data.value }}</span>
{% if data.placeholder %}
<span class="textarea__placeholder">{{ data.placeholder }}</span>
{% endif %}
{% endset %}
{% include '@textfield' with {
data: data,
input: input,
class: 'textarea'
} %}
{
"language": "en-US",
"data": {
"label": "Textarea label",
"id": "text1",
"name": "textarea",
"placeholder": "Placeholder text"
}
}
.textarea__field {
display: none;
}
.textarea__input {
height: auto;
min-height: 62px;
resize: none;
padding-top: 17px;
transition-property: min-height, box-shadow;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
@include bp(sm-min) {
padding-top: 11px;
}
html.no-js &,
.textarea.is-dirty:not(.is-disabled) &,
&:focus {
transition-timing-function: $transition-easing-out;
min-height: 84px;
@include bp(sm-min) {
min-height: 208px;
}
}
}
.textarea__placeholder {
font-size: $font-size-h3-xs;
font-weight: $font-weight-medium;
line-height: 1.31;
color: $color-text-02;
position: absolute;
top: 17px;
left: 0;
pointer-events: none;
@include bp(sm-min) {
font-size: $font-size-h3-lg;
top: 11px;
}
.textarea.is-dirty & {
display: none;
}
}
import Component from '../../component/component';
import '../textfield/textfield';
import './textarea.scss';
export interface ITextAreaSettings {
dirtyClass?: string;
}
export default class TextArea extends Component {
static initSelector: string = '.textarea';
public settings: ITextAreaSettings;
public input: JQuery;
public textareaField: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
}, this.element.data());
this.input = this.element.find('.textarea__input');
this.textareaField = this.element.find('.textarea__field');
this.init();
}
init(): void {
this.input.on('input', this.onChange.bind(this));
this.checkValue();
}
onChange(): void {
this.textareaField.val(this.input[0].innerText.trim());
this.checkValue();
}
checkValue(): void {
if (this.textareaField.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}
<div class="textfield
textarea is-invalid">
<label class="textfield__label " for="text1">
Textarea label </label>
<div class="textfield__inner">
<textarea class="textarea__field" id="text1" name="textarea"></textarea>
<span class="textfield__input textarea__input" contenteditable> Olime 1. oktoobril kontoris ja tegime uue textarea componendi</span>
<span class="textarea__placeholder">Placeholder text</span>
</div>
<div class="textfield__error">
Please check your input
</div>
</div>
{% set input %}
<textarea
class="textarea__field"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
></textarea>
<span
class="textfield__input textarea__input"
contenteditable
> {{ data.value }}</span>
{% if data.placeholder %}
<span class="textarea__placeholder">{{ data.placeholder }}</span>
{% endif %}
{% endset %}
{% include '@textfield' with {
data: data,
input: input,
class: 'textarea'
} %}
{
"language": "en-US",
"data": {
"label": "Textarea label",
"id": "text1",
"name": "textarea",
"placeholder": "Placeholder text",
"isInvalid": true,
"error": "Please check your input",
"value": "Olime 1. oktoobril kontoris ja tegime uue textarea componendi"
}
}
.textarea__field {
display: none;
}
.textarea__input {
height: auto;
min-height: 62px;
resize: none;
padding-top: 17px;
transition-property: min-height, box-shadow;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
@include bp(sm-min) {
padding-top: 11px;
}
html.no-js &,
.textarea.is-dirty:not(.is-disabled) &,
&:focus {
transition-timing-function: $transition-easing-out;
min-height: 84px;
@include bp(sm-min) {
min-height: 208px;
}
}
}
.textarea__placeholder {
font-size: $font-size-h3-xs;
font-weight: $font-weight-medium;
line-height: 1.31;
color: $color-text-02;
position: absolute;
top: 17px;
left: 0;
pointer-events: none;
@include bp(sm-min) {
font-size: $font-size-h3-lg;
top: 11px;
}
.textarea.is-dirty & {
display: none;
}
}
import Component from '../../component/component';
import '../textfield/textfield';
import './textarea.scss';
export interface ITextAreaSettings {
dirtyClass?: string;
}
export default class TextArea extends Component {
static initSelector: string = '.textarea';
public settings: ITextAreaSettings;
public input: JQuery;
public textareaField: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
}, this.element.data());
this.input = this.element.find('.textarea__input');
this.textareaField = this.element.find('.textarea__field');
this.init();
}
init(): void {
this.input.on('input', this.onChange.bind(this));
this.checkValue();
}
onChange(): void {
this.textareaField.val(this.input[0].innerText.trim());
this.checkValue();
}
checkValue(): void {
if (this.textareaField.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}
<div class="textfield
textarea is-disabled">
<label class="textfield__label " for="text1">
Textarea label </label>
<div class="textfield__inner">
<textarea class="textarea__field" id="text1" name="textarea" disabled></textarea>
<span class="textfield__input textarea__input" contenteditable> Tere</span>
<span class="textarea__placeholder">Placeholder text</span>
</div>
</div>
{% set input %}
<textarea
class="textarea__field"
id="{{ data.id }}"
name="{{ data.name }}"
{% if data.isDisabled %}disabled{% endif %}
{{ data.attributes }}
></textarea>
<span
class="textfield__input textarea__input"
contenteditable
> {{ data.value }}</span>
{% if data.placeholder %}
<span class="textarea__placeholder">{{ data.placeholder }}</span>
{% endif %}
{% endset %}
{% include '@textfield' with {
data: data,
input: input,
class: 'textarea'
} %}
{
"language": "en-US",
"data": {
"label": "Textarea label",
"id": "text1",
"name": "textarea",
"placeholder": "Placeholder text",
"isDisabled": true,
"value": "Tere"
}
}
.textarea__field {
display: none;
}
.textarea__input {
height: auto;
min-height: 62px;
resize: none;
padding-top: 17px;
transition-property: min-height, box-shadow;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
@include bp(sm-min) {
padding-top: 11px;
}
html.no-js &,
.textarea.is-dirty:not(.is-disabled) &,
&:focus {
transition-timing-function: $transition-easing-out;
min-height: 84px;
@include bp(sm-min) {
min-height: 208px;
}
}
}
.textarea__placeholder {
font-size: $font-size-h3-xs;
font-weight: $font-weight-medium;
line-height: 1.31;
color: $color-text-02;
position: absolute;
top: 17px;
left: 0;
pointer-events: none;
@include bp(sm-min) {
font-size: $font-size-h3-lg;
top: 11px;
}
.textarea.is-dirty & {
display: none;
}
}
import Component from '../../component/component';
import '../textfield/textfield';
import './textarea.scss';
export interface ITextAreaSettings {
dirtyClass?: string;
}
export default class TextArea extends Component {
static initSelector: string = '.textarea';
public settings: ITextAreaSettings;
public input: JQuery;
public textareaField: JQuery;
constructor(element: HTMLElement) {
super(element);
this.settings = $.extend({
dirtyClass: 'is-dirty',
}, this.element.data());
this.input = this.element.find('.textarea__input');
this.textareaField = this.element.find('.textarea__field');
this.init();
}
init(): void {
this.input.on('input', this.onChange.bind(this));
this.checkValue();
}
onChange(): void {
this.textareaField.val(this.input[0].innerText.trim());
this.checkValue();
}
checkValue(): void {
if (this.textareaField.val() === '') {
this.element.removeClass(this.settings.dirtyClass);
} else {
this.element.addClass(this.settings.dirtyClass);
}
}
}