Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.5k views
in Technique[技术] by (71.8m points)

html - Javascript - How to limit character in a contentEditable div?

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'
               
            }
    }
       
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I dont think there is a definite option for that, but you can surely use keydowns count.

jQuery

$('div').on('keydown', function(event) {
  $('span').text('Total chars:' + $(this).text().length);
  if($(this).text().length === 100 && event.keyCode != 8) {
    event.preventDefault();
  }
});
div {
    height: 100px;
    width: 300px;
    border: 1px solid grey;
    outline: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true"></div>
<span></span>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...