Javascript - 如何限制 contentEditable div 中的字符？答案

【问题标题】：Javascript - How to limit character in a contentEditable div?Javascript - 如何限制 contentEditable div 中的字符？
【发布时间】：2021-04-26 07:26:30
【问题描述】：

我还在学习英语。感谢您的耐心等待。

我创建了一个待办事项列表 CRUD。代码运行良好，但我正在改进我的代码。

当我按下“加号”按钮时，我创建了一个带有文本的 div，按钮删除和编辑，如图所示。

Task created

但是当我传递一定数量的字符时，它就会发生。（见图）

When the task is big, it passes to other line

如何限制它？谢谢！

我的 HTML 代码：

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

我的 Javascript 代码：

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

【问题讨论】：

这能回答你的问题吗？ Limiting Number of Characters in a ContentEditable div

标签： javascript html character contenteditable

【解决方案1】：

我不认为有一个明确的选择，但你肯定可以使用 keydowns 计数。

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>

原版 JS

let maxChars = 10;
let currentChars = 0;

function checkLength(event) {
  if(currentChars >= maxChars) {
    alert('reached max chars');
    event.preventDefault();
  } else {
    currentChars++;
  }
}

div {
    height: 100px;
    width: 300px;
    border: 1px solid grey;
    outline: 0;
}

<div contenteditable="true" onkeypress="checkLength(event)"></div>
<span></span>

【讨论】：

w3schools.com/tags/att_input_maxlength.asp
这是一个contentEditable div 不是输入