I am learning english yet. Thank you for you patience.
I created a todo list CRUD. The code is working well but I am improving even more my code.
When I press the button "plus" I create a div with the text, button delete and edit as you can see in the pic.
Task created
But when I pass a certain number of characters, it happens. (See the pic)
When the task is big, it passes to other line
How can I put a limit to it? Thank you!
My HTML code:
<body>
<header>
<h1>Lista de Tarefas</h1>
</header>
<form>
<input type="text" name="task" id="task" maxlength="34">
<button class='btnadd'><i class="fas fa-plus"></i></button>
</form>
<div class="container-tasks">
<ul class="list-task"></ul>
</div>
<script src="/js/app.js"></script>
</body>
My Javascript code:
let input = document.getElementById('task');
let btnAdd = document.querySelector(".btnadd");
let list = document.querySelector(".list-task");
// Events
btnAdd.addEventListener('click', addTask);
// Functions
function addTask(event){
event.preventDefault();
if (input.value === ''){
alert('You must type something');
return false;
} else {
addTask
}
let divTask = document.createElement("div");
divTask.classList.add("task");
let newTask = document.createElement("div");
newTask.innerText = input.value;
newTask.classList.add("new-task");
divTask.appendChild(newTask);
let btnDelete = document.createElement('button');
btnDelete.innerHTML = 'Remover';
btnDelete.classList.add("btn-remover");
divTask.appendChild(btnDelete);
let btnEdit = document.createElement('button');
btnEdit.innerHTML = 'Editar';
btnEdit.classList.add("btn-editar");
divTask.appendChild(btnEdit);
list.appendChild(divTask);
input.value = "";
btn.addEventListener('click', removeTask);
function removeTask(){
divTask.remove();
}
btnEdit.addEventListener('click', editTask);
function editTask(){
const endEdit = document.createElement('button');
endEdit.classList.add('end-edit');
endEdit.innerHTML = 'Finalizar'
divTask.appendChild(endEdit);
newTask.contentEditable = true;
newTask.focus();
btnEdit.style.display = 'none'
endEdit.addEventListener('click', endEdition);
function endEdition(){
newTask.contentEditable = false;
endEdit.remove();
btnEdit.style.display = 'block'
}
}
}
question from:
https://stackoverflow.com/questions/65834820/javascript-how-to-limit-character-in-a-contenteditable-div 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
