Всем привет! Пишу первый блокнот, уже сделал кое-какой функционал, но теперь хочу, что бы по клику на какой-то из элементов li высвечивалось поле для ввода с текстом введенным в li для его редактирования. Тут сразу первый вопрос: как лучше это будет сделать? Через "div contenteditable=true" или "textarea"? И второй вопрос, немного запутался в логике создания самой функции. На данный момент хочу по клику через тугл добавить классы, где и будет отображаться поля для ввода и кнопка, которые по минимуму застилизованы в css. Собственно с последним хотел попросить помочь.
'use strict'
function myNote() {
const ul = document.querySelector('ul.main_card');
const input = document.querySelector('input.input_string');
let notes = [];
let list = document.querySelectorAll('ul.main_card > li');
notes.push(...list);
ul.querySelectorAll('li').forEach(n => {
elementDeleteBtn(n.querySelector('.main_delete'), n)
});
function noteAdd() {
const li = document.createElement('li');
li.classList.add('main_text');
const newNote = input.value;
li.append(newNote);
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('main_delete');
deleteBtn.type = 'text';
li.prepend(deleteBtn);
notes.push(li);
ul.appendChild(li, deleteBtn);
input.value = "";
input.focus();
elementDeleteBtn(deleteBtn, li);
editNote(document.querySelector('li'));
}
input.addEventListener('keydown', (e) => {
if (input.value.trim().length && e.keyCode === 13) {
noteAdd();
}
})
function elementDeleteBtn(button, i) {
button.addEventListener('click', (event) => {
event.preventDefault();
i.remove();
notes.splice(notes.indexOf(i), 1);
})
}
function editNote(i) {
i.addEventListener('click', (e) => {
e.stopPropagation();
let area = document.createElement('div.main_edit_input');
let text = i.querySelector('.main_text');
let eddBtn = document.createElement('button');
// area.classList.add('main_edit_input_v');
// eddBtn.classList.add('main_edit_btn_v');
if (???) {
area.classList.toggle("main_edit_input_v");
eddBtn.classList.toggle("main_edit_btn_v");
}
})
}
}
document.addEventListener("DOMContentLoaded", myNote);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noote</title>
<link rel="stylesheet" href="/style/bootstrap-grid.min.css">
<link rel="stylesheet" href="/style/bootstrap-reboot.min.css">
<script src="https://kit.fontawesome.com/12b812bef7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/style/style.css">
</head>
<body>
<section class="header">
<div class="container">
<div class="row">
<div class="header_text">
Noote
</div>
</div>
</div>
</section>
<section class="input">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<input type="text" placeholder="Печатай" class="input_string">
<!-- <div contenteditable="true" class="input_string"></div> -->
</div>
</div>
</div>
</section>
<section class="main">
<div class="container">
<div class="row">
<ul class="main_card">
<div class = 'main_edit_input' contenteditable=true></div>
<button class="main_edit_btn">Изменить</button>
<li class="main_text">
<button class="main_delete"></button>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure error eveniet vel laborum omnis maxime, vitae non quis rerum iste voluptatum beatae quaerat, aut eum sunt magni dolores voluptatem consequatur.
</li>
<li class="main_text">
<button class="main_delete"></button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus debitis omnis sapiente autem natus, modi perspiciatis cumque!
</li>
<li class="main_text">
<button class="main_delete"></button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nemo id impedit, saepe placeat ipsam dolorum reprehenderit quae quod maiores quasi asperiores consequuntur vero dolorem culpa repellendus quos optio expedita?
</li>
</ul>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
|
Код:
|
.header {
height: 42px;
background-color: #fff475;
padding: 5px 0 5px 0;
margin: 0;
}
.header .header_text {
padding: 0;
margin: 0;
font-size: 20px;
}
.input {
padding: 0;
}
.input .input_string {
display:inline-block;
margin-top: 120px;
width: 100%;
min-height: 20px;
border: none;
border-bottom: 2px solid #535353;
}
.main {
padding: 0;
margin-top: 40px;
min-height: 500px;
}
.main .main_card {
display: flex;
justify-content: space-evenly;
}
.main .main_text {
position: relative;
width: 200px;
padding: 10px;
min-height: 50px;
list-style-type: none;
border: 1px solid rgb(179, 179, 179);
border-radius: 3%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
cursor: pointer;
z-index: 1;
}
.main .main_text:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.main .main_delete {
position: absolute;
height: 20px;
width: 20px;
z-index: 2;
margin-left: 160px;
border-radius: 100%;
border: none;
background-color: #9999;
}
.main_edit_input {
display: none;
}
.main_edit_btn {
display: none;
}
.main_edit_input_v {
display: block;
position: absolute;
min-height: 20px;
min-width: 200px;
z-index: 2;
background-color: #fff475;
}
.main_edit_btn_v {
display: block;
position: absolute;
height: 20px;
width: 100px;
z-index: 2;
border-radius: 100%;
border: none;
background-color: #9999;
} |