58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<template>
|
|
<div class="text-area-multine">
|
|
<label for="textarea-comments" class="fw-bold mb-1">{{labelText}} <span class="fw-normal">{{labelTextOptional}}</span></label>
|
|
<textarea id="textarea-comments" class="p-4" maxlength="250" role="textbox" contenteditable="true" aria-multiline="true" aria-required="false"></textarea>
|
|
<p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">{{textAreaFooterText}}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "textareamultiline",
|
|
props: {
|
|
labelText: String,
|
|
labelTextOptional: String,
|
|
textAreaFooterText: String,
|
|
footerText: Boolean
|
|
},
|
|
mounted: function() {
|
|
const my_textarea = document.getElementById('textarea-comments');
|
|
const remaining = document.getElementById('charactersremaining');
|
|
const remain = 250;
|
|
|
|
my_textarea.addEventListener('input',()=>{
|
|
const total = remain - my_textarea.value.length;
|
|
const color = total < remain * 0.1 ? 'red' : null; //Change text to red when the total remaining goes below 25;
|
|
remaining.innerHTML = `${total}/250 characters remaining`;
|
|
remaining.style.color = color;
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-area-multine {
|
|
display: flex;
|
|
flex-direction: column;
|
|
label {
|
|
span {
|
|
color: $gray-500;
|
|
}
|
|
}
|
|
textarea {
|
|
border-radius: .5rem;
|
|
border: 1px solid $gray-550;
|
|
height: 88px;
|
|
&:hover {
|
|
box-shadow: 0 0 0 4px #9fcee6;
|
|
}
|
|
&:focus {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
outline: none;
|
|
}
|
|
}
|
|
p {
|
|
color: $gray-500;
|
|
}
|
|
}
|
|
</style>
|