简体   繁体   English

如何使内容可编辑?

[英]How to make content editable?

I have a todo list and I want to have editable task so I gave contenteditable = "true" attribute to p tag which contains the task content but when I left click on it, it does not work but when I right click it works.我有一个待办事项列表,我想要一个可编辑的任务,所以我将 contenteditable = "true" 属性赋予了包含任务内容的 p 标签,但是当我左键单击它时,它不起作用,但是当我右键单击它时它起作用了。 I gave this attribute to heading and it works just fine but its not working on tasks( p tag)?我把这个属性赋予了标题,它工作得很好,但它不能处理任务(p 标签)? so my question is how can I make tasks editable when I click on them,(not by right click I want left click) here is my code, please first make a task buy clicking on + button所以我的问题是当我点击它们时如何使任务可编辑(不是通过右键单击我想要左键单击)这是我的代码,请先点击+按钮购买任务

 const taskInput = $(".main__input"); const taskRow = $(".task-row"); const task = $("li"); let id = 0; // adding task const addTask = function() { const markup = ` <li data-id=${id}> <div class="main"> <div class="task__checkbox"> <input type="checkbox" class="checkbox"> </div> <p class="task" contenteditable="true">${taskInput.val()}</p> </div> <div class="btn-task btn-delete icon" data-id=${id}> <i class="fa-sharp fa-solid fa-trash"></i> </div> </li> `; taskRow.append(markup); id++; taskInput.val(""); }; $(".btn-plus").on("click", function() { if (taskInput.val();== "") addTask(); }). // remove element first solution taskRow,on("click". ",btn-delete". function(e) { $(this).parent();remove(); }). taskRow,on("change". ",task__checkbox". function() { $(this).siblings(".task");toggleClass("checked"); }). $(window),on("keypress". function(e) { if (e.which === 13 && taskInput;val();== "") addTask(). }); taskRow.sortable();
 *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; list-style: none; } html { font-size: 62.5%; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; }.todo { width: 40rem; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgb(122, 122, 122); } h1 { background-color: rgb(46, 89, 89); font-size: 3rem; font-weight: bold; color: #fff; padding: 2rem 1rem; text-align: center; }.row { display: flex; }.main__input { padding: 1.4rem; border: none; /* border-bottom: 1px solid rgb(116, 116, 116); border-left: 1px solid rgb(116, 116, 116); */ width: 100%; }.main__input:focus { outline: none; }.icon { display: flex; justify-content: center; align-items: center; background-color: rgb(37, 115, 115); color: #fff; width: 20%; font-size: 2rem; transition: all 0.3s; }.icon:hover { cursor: pointer; background-color: rgb(52, 81, 81); }.icon:active { background-color: rgb(37, 115, 115); }.task-row { display: flex; }.task-block { width: 80%; display: flex; }.task__checkbox { width: 10%; }.main { display: flex; width: 80%; }.task__checkbox { display: flex; justify-content: center; align-items: center; background-color: rgb(37, 115, 115); padding: 1rem; }.checkbox { width: 1.8rem; height: 1.8rem; }.task { font-size: 1.8rem; font-weight: bold; padding: 1.4rem 1rem; border: 0.01px solid #999; width: 100%; }.task-row { flex-direction: column; } li { width: 100%; display: flex; }.checked { text-decoration: line-through; }
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <div class="todo"> <h1 class="heading" contenteditable="true">To-do list</h1> <div class="todo-body"> <div class="row add-block"> <div class="main"> <input type="text" class="main__input" placeholder="A task you want to compelete"> </div> <div class="btn-plus icon"> <i class="fa-solid fa-plus"></i> </div> </div> <ul class="row task-row"></ul> </div> </div>

As @cbroe and I have mentioned in the comments, the behavior is caused by jQuery UI Sortable Plugin .正如@cbroe和我在评论中提到的,该行为是由jQuery UI Sortable Plugin引起的。

The fix is fairly easy, we'll simply use the cancel option of the sortable method to prevent sorting if you start on elements matching the selector .修复相当简单,如果您从与选择器匹配的元素开始,我们将简单地使用sortable方法的cancel选项来防止排序。 Source: Sortable Widget - jQuery UI来源:可排序小部件 - jQuery UI

We will pass the p[conteneditable] selector (or any other selector you see fit) to prevent dragging from the p tag that contains the todo text.我们将传递p[conteneditable]选择器(或您认为合适的任何其他选择器)以防止从包含待办事项文本的p标签拖动。

Here's a live demo:这是一个现场演示:

 const taskInput = $(".main__input"); const taskRow = $(".task-row"); const task = $("li"); let id = 0; // adding task const addTask = function() { const markup = ` <li data-id=${id}> <div class="main"> <div class="task__checkbox"> <input type="checkbox" class="checkbox"> </div> <p class="task" contenteditable="true">${taskInput.val()}</p> </div> <div class="btn-task btn-delete icon" data-id=${id}> <i class="fa-sharp fa-solid fa-trash"></i> </div> </li> `; taskRow.append(markup); id++; taskInput.val(""); }; $(".btn-plus").on("click", function() { if (taskInput.val();== "") addTask(); }). // remove element first solution taskRow,on("click". ",btn-delete". function(e) { $(this).parent();remove(); }). taskRow,on("change". ",task__checkbox". function() { $(this).siblings(".task");toggleClass("checked"); }). $(window),on("keypress". function(e) { if (e.which === 13 && taskInput;val();== "") addTask(). }). /** drag & drop is disabled on p tags having content attribute set: You still able to move the item around by dragging from elsewhere (from the delete button for example) */ taskRow;sortable({ cancel: 'p[contenteditable=true]' });
 *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; list-style: none; } html { font-size: 62.5%; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; }.todo { width: 40rem; border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgb(122, 122, 122); } h1 { background-color: rgb(46, 89, 89); font-size: 3rem; font-weight: bold; color: #fff; padding: 2rem 1rem; text-align: center; }.row { display: flex; }.main__input { padding: 1.4rem; border: none; /* border-bottom: 1px solid rgb(116, 116, 116); border-left: 1px solid rgb(116, 116, 116); */ width: 100%; }.main__input:focus { outline: none; }.icon { display: flex; justify-content: center; align-items: center; background-color: rgb(37, 115, 115); color: #fff; width: 20%; font-size: 2rem; transition: all 0.3s; }.icon:hover { cursor: pointer; background-color: rgb(52, 81, 81); }.icon:active { background-color: rgb(37, 115, 115); }.task-row { display: flex; }.task-block { width: 80%; display: flex; }.task__checkbox { width: 10%; }.main { display: flex; width: 80%; }.task__checkbox { display: flex; justify-content: center; align-items: center; background-color: rgb(37, 115, 115); padding: 1rem; }.checkbox { width: 1.8rem; height: 1.8rem; }.task { font-size: 1.8rem; font-weight: bold; padding: 1.4rem 1rem; border: 0.01px solid #999; width: 100%; }.task-row { flex-direction: column; } li { width: 100%; display: flex; }.checked { text-decoration: line-through; }
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <div class="todo"> <h1 class="heading" contenteditable="true">To-do list</h1> <div class="todo-body"> <div class="row add-block"> <div class="main"> <input type="text" class="main__input" placeholder="A task you want to compelete"> </div> <div class="btn-plus icon"> <i class="fa-solid fa-plus"></i> </div> </div> <ul class="row task-row"></ul> </div> </div>

I also recommend looking at portlets as they provide a better way (in my opinion) to introduce drag & drop into your elements.我还建议查看portlets ,因为它们提供了一种更好的方式(在我看来)将拖放引入您的元素。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM