Почему в span передается текст только после второго нажатия на button"редактировать"?
1)нажимаю кнопку "редактировать" 2)Ввожу текст 3)убираю фокус 4)span пустой Но если я нажму опять кнопку "редактировать" и уберу фокус с textarea, то текст сохраняется как сделать что бы сохранялся сразу после ухода фокуса? код в в скрипте подписан, как (//редактирование текста)
body {
background-color: #fbf2e9;
}
.group-btn {
margin : 1em;
display : flex;
justify-content: space-between;
gap : 1em;
}
.text-window {
color : aliceblue;
user-select: none;
}
button {
user-select: none;
}
input {
user-select: none;
}
.blockDnone {
display: none;
}
.block {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color: black;
opacity : 0.9;
}
.block2 {
width : 100%;
height : 100%;
display : flex;
flex-direction : column;
justify-content: center;
align-items : center;
}
.closeWindow {
width : 5vw;
height : 5vh;
font-weight: 900;
color : black;
}
.groupTextAll {
margin: 1em 0em;
}
.group {
margin : 1em;
padding : .5em 1em;
border : 2px solid gray;
border-radius: 1em;
}
.text {
color: gray;
}
.subject-btn {
display : flex;
justify-content: space-between;
}
.edit {
display: none;
}
textarea {
background-color: bisque;
width : 100%;
height : 150px;
resize : none;
}
.none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="news.css" />
<title>Document</title>
</head>
<body id="all">
<div class="groupTextAll">
<div class="group-btn">
<button class="delAll">Удалить все</button>
<button class="add">Добавить новость</button>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Муфтий призвал наказать блогера, который растоптал и оплевал
православный крест
</h2>
<span class="text view">
Глумившегося над православным крестом блогера из Дагестана необходимо
строго наказать по российскому законодательству, заявил РИА Новости
председатель Координационного центра мусульман Северного Кавказа
муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев Ранее с просьбой
привлечь блогера к ответственности в МВД и Генпрокуратуру обратился
глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал
360° 17 июля в сети появилось видео, на котором дагестанский стример
топчет ногами православный крест.Lenta.ru Следственный комитет
возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение
права на свободу совести и вероисповеданий.
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли
она комнатой
</h2>
<span class="text view">
Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания
Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к
постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого
обращения послужило выступление постпреда США на предыдущем заседании
Совбеза ООН, организованном Россией и посвященном многостороннему
сотрудничеству, где Гринфилд сосредоточила внимание на украинском
кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не
возникло ощущение, что вы ошиблись комнатой и пришли не на ту
дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю»,
— обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред
Израиля, который ранее выступил на дебатах в Совбезе по
ближневосточному кризису, активно критиковал Иран и заявил, что
Тегеран "поставляет военное оборудование, которое потом используется
против украинцев".РИА Новости
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Путин поручил перейти к масштабному внедрению цифрового рубля
</h2>
<span class="text view">
Платформа цифрового рубля продемонстрировала свою
работоспособность.Газета.Ru России необходимо не упустить момент —
своевременно настраивать правовую базу, развивать инфраструктуру,
создавать условия для обращения цифровых активов как внутри страны,
так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр
"Нужно сделать следующий шаг: перейти к более широкому внедрению
цифрового рубля в экономику, хозяйственную деятельность и в сферу
финансов", — отметил Путин.Газета.Ru Банк России с 1 сентября расширит
пилот цифрового рубля на реальных клиентах с реальными деньгами,
сообщила первый зампред ЦБ Ольга Скоробогатова на Финансовом
конгрессе.
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
"use strict";
//удаление контента
$("button.delAll").click(() => $("div.group").remove());
//удаление по одной
$("div.groupTextAll").click((event) => {
const btn = $(event.target);
if (!btn.is('button.del')) return;
$(event.target).closest('div.group').remove()
});
//добавление контента
$("button.add").click(() => {
$('<div class="group"><div class="subject-btn"><button class="very">Редактировать</button><button class="del">удалить</button></div><h2 class="vi">Заголовок</h2><span class="text view">Текст</span><textarea name="text" class="edits edit"></textarea></div>').appendTo("div.groupTextAll");
});
//редактирование текста
$('div.groupTextAll').click((event)=>{
const $parent = $(event.target).closest("div.group"),
very = $(event.target);
if(!very.is('button.very')) return;
$parent.find('span.view').addClass('none');
$parent.find('textarea.edits').removeClass('edit');
let textarea = $parent.find('textarea.edits').val();
let span = $parent.find('span.view').text(textarea);
});
$('textarea.edit').on('blur',(event)=>{
// if(event.key == 'Enter') $('textarea.edits').blur();
$('span.view').removeClass('none');
$('textarea.edits').addClass('edit');
});
</script>
</body>
</html>Ответы (1 шт):
Автор решения: Назим Фаталиев
→ Ссылка
Немного помучился и сделал:
body {
background-color: #fbf2e9;
}
.group-btn {
margin : 1em;
display : flex;
justify-content: space-between;
gap : 1em;
}
.text-window {
color : aliceblue;
user-select: none;
}
button {
user-select: none;
}
input {
user-select: none;
}
.blockDnone {
display: none;
}
.block {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color: black;
opacity : 0.9;
}
.block2 {
width : 100%;
height : 100%;
display : flex;
flex-direction : column;
justify-content: center;
align-items : center;
}
.closeWindow {
width : 5vw;
height : 5vh;
font-weight: 900;
color : black;
}
.groupTextAll {
margin: 1em 0em;
}
.group {
margin : 1em;
padding : .5em 1em;
border : 2px solid gray;
border-radius: 1em;
}
.text {
color: gray;
}
.subject-btn {
display : flex;
justify-content: space-between;
}
.edit {
display: none;
}
textarea {
background-color: bisque;
width : 100%;
height : 150px;
resize : none;
}
.none {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="news.css" />
<title>Document</title>
</head>
<body id="all">
<div class="groupTextAll">
<div class="group-btn">
<button class="delAll">Удалить все</button>
<button class="add">Добавить новость</button>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Муфтий призвал наказать блогера, который растоптал и оплевал
банковский пластик
</h2>
<span class="text view">
Глумившегося над банковским пластиком блогера из Дагестана необходимо
строго наказать по российскому законодательству, заявил РИА Новости
председатель Координационного центра мусульман Северного Кавказа
муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев Ранее с просьбой
привлечь блогера к ответственности в МВД и Генпрокуратуру обратился
глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал
360° 17 июля в сети появилось видео, на котором дагестанский стример
топчет ногами банковский пластик.Lenta.ru Следственный комитет
возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение
права на свободу предпринимательства.
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли
она планетой
</h2>
<span class="text view">
Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания
Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к
постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого
обращения послужило выступление постпреда США на предыдущем заседании
Совбеза ООН, организованном Россией и посвященном многостороннему
сотрудничеству, где Гринфилд сосредоточила внимание на марсианском
кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не
возникло ощущение, что вы ошиблись планетой и прилетели не на ту
дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю»,
— обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред
Израиля, который ранее выступил на дебатах в Совбезе по
ближневосточному кризису, активно критиковал Луну и заявил, что
Коперник-Сити "поставляет военное оборудование, которое потом используется
против марсиан".РИА Новости
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">
Путин поручил перейти к масштабному внедрению цифрового замка
</h2>
<span class="text view">
Платформа цифрового замка продемонстрировала свою
работоспособность.Газета.Ru России необходимо не упустить момент —
своевременно настраивать правовую базу, развивать инфраструктуру,
создавать условия для обращения цифровых запоров как внутри страны,
так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр
"Нужно сделать следующий шаг: перейти к более широкому внедрению
цифрового замка в экономику, хозяйственную деятельность и в сферу
охраны", — отметил Путин.Газета.Ru Банк России с 1 сентября расширит
пилот цифрового замка на реальных воротах с реальными петлями,
сообщила первый зампред ЦБ Ольга Скоробогатова на Охранном
конгрессе.
</span>
<textarea name="text" class="edits edit"></textarea>
</div>
<template class="creat">
<div class="group">
<div class="subject-btn">
<button class="very">Редактировать</button>
<button class="del">удалить</button>
</div>
<h2 class="vi">Заголовок</h2>
<span class="text view"> Текст </span>
<textarea name="text" class="edits edit"></textarea>
</div>
</template>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
"use strict";
//удаление контента
$("button.delAll").click(() => $("div.group").remove());
//удаление по одной
$("div.groupTextAll").click((event) => {
const btn = $(event.target);
if (!btn.is("button.del")) return;
$(event.target).closest("div.group").remove();
});
//редактирование текста
$("div.groupTextAll").click((event) => {
const $parent = $(event.target).closest("div.group"),
very = $(event.target);
if (!very.is("button.very")) return;
const span = $parent.find("span.view");
const textarea = $parent.find("textarea.edits");
span.addClass("none");
textarea.removeClass("edit");
textarea.focus();
textarea.blur((event) => {
span.text(textarea.val());
span.removeClass("none");
textarea.addClass("edit");
});
textarea.keydown((event) => {
if (event.key == "Enter") $parent.find("textarea.edits").blur();
});
});
//добавление контента
$("div.groupTextAll").click((event) => {
let $target = $(event.target).closest("div.groupTextAll");
let addBtn = $(event.target);
let $clone = $target.find("template.creat").clone();
if (!addBtn.is("button.add")) return;
$("div.groupTextAll").append($clone.html());
});
</script>
</body>
</html>