68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
|
<div class="textarea-question">
|
|
<label for="textarea-comments" class="fw-bold mb-1">{{ labelText }} <span v-if="isRequired" class="fw-normal">(Optional)</span></label>
|
|
<textarea
|
|
id="textarea-comments"
|
|
class="p-4"
|
|
:maxlength=maxLength
|
|
role="textbox"
|
|
contenteditable="true"
|
|
aria-multiline="true"
|
|
aria-required="false"></textarea>
|
|
<p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
|
|
{{maxLength}}/{{maxLength}} characters remaining
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "textareaquestion",
|
|
props: {
|
|
cmsWidgetName: String,
|
|
isRequired: Boolean,
|
|
maxLength: Number,
|
|
modelValue: String,
|
|
labelText: String,
|
|
},
|
|
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">
|
|
.textarea-question {
|
|
display: flex;
|
|
flex-direction: column;
|
|
label {
|
|
span {
|
|
color: $gray-500;
|
|
}
|
|
}
|
|
textarea {
|
|
border-radius: 0.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>
|