This commit is contained in:
2023-08-02 11:27:10 +03:00
parent 9d0eabc9ff
commit 9f1e952b19
3 changed files with 24 additions and 6 deletions

View File

@@ -135,8 +135,9 @@
/*max-width: calc(80% - 40px);*/ /*max-width: calc(80% - 40px);*/
resize: none; resize: none;
padding: 20px; padding: 20px;
width: 80%; width: 85%;
float: left; float: left;
} }
.container-input-form-create-ticket{ .container-input-form-create-ticket{
@@ -154,7 +155,7 @@
/*top: 39px;*/ /*top: 39px;*/
/*left: 93%;*/ /*left: 93%;*/
height: calc(100% - 20px); height: calc(100% - 20px);
width: calc(20% - 60px); width: calc(15% - 60px);
padding-top: 20px; padding-top: 20px;
padding-right: 20px; padding-right: 20px;
min-height: 220px; min-height: 220px;
@@ -164,6 +165,13 @@
/*display: inline-block;*/ /*display: inline-block;*/
} }
.letrs-count.disabled{
/*color: #000000;*/
background: rgb(241 241 241 / 30%);
color: #ff001a;
}
.create-ticket-btn{ .create-ticket-btn{
width: 200px; width: 200px;
height: 60px; height: 60px;

View File

@@ -18,15 +18,24 @@ function createTicketShow () {
} }
function countLetters () { function countLetters () {
event.preventDefault()
let area = document.querySelector(".el-form-create-ticket-textarea") let area = document.querySelector(".el-form-create-ticket-textarea")
let count = area.value.length let count = area.value.length
if (count <= 500) { let ins_area = document.querySelector(".letrs-count-span")
// let spans = document.querySelectorAll(".ins-span")
if (count < 500) {
let ins_area = document.querySelector(".letrs-count-span") let ins_area = document.querySelector(".letrs-count-span")
ins_area.innerHTML = count ins_area.innerHTML = count
} }
else { else {
ins_area.innerHTML = '500'
// spans[0].classList.toggle("disabled")
// spans[1].classList.toggle("disabled")
area.setAttribute("disabled","disabled") area.setAttribute("disabled","disabled")
let count_div = ins_area.closest("div")
count_div.classList.toggle("disabled")
} }
} }
// var input; // var input;

View File

@@ -26,15 +26,16 @@
{% if form.errors.name %}<div class="errors">{{ form.errors.name }}</div>{% endif %} {% if form.errors.name %}<div class="errors">{{ form.errors.name }}</div>{% endif %}
</div> </div>
<div class="container-input-form-create-ticket"> <div class="container-input-form-create-ticket">
<div style="width: 100%;min-height: 240px;"> <div style="width: 100%;min-height: 240px;filter: drop-shadow(-1px 4px 10px rgba(198, 199, 203, 0.20)) drop-shadow(0px -1px 10px rgba(198, 199, 203, 0.20));">
<textarea name="text" <textarea name="text"
id="id_text" id="id_text"
class="el-form-create-ticket-textarea" class="el-form-create-ticket-textarea"
placeholder="Введите сообщение..." placeholder="Введите сообщение..."
value="{% if form.adding_machine.text %}{{ form.initial.text }}{% endif %}" value="{% if form.adding_machine.text %}{{ form.initial.text }}{% endif %}"
onkeyup="countLetters()"></textarea> onclick="countLetters()"
oninput="countLetters()"></textarea>
{% if form.errors.text %}<div class="errors">{{ form.errors.text }}</div>{% endif %} {% if form.errors.text %}<div class="errors">{{ form.errors.text }}</div>{% endif %}
<div class="letrs-count"><span class="letrs-count-span">0</span><span>/500</span></div> <div class="letrs-count"><span class="letrs-count-span ins-span">0</span><span class="ins_span">/500</span></div>
</div> </div>
</div> </div>