不可通过光标或双击选择可编辑的内容 [英] editable content does not select by cursor or double click
本文介绍了不可通过光标或双击选择可编辑的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个如下所示的拖放式区块表:
I have a drag and drop table of blocks like this:
$(document).ready(function(e) {
$(".sortable").sortable({
connectWith: ".sortable"//use this to connect with other uls
});
$(".sortable").disableSelection();
$("#btn").on("click", function() {
const positions = [];
var count = 0;
//get length of all sortable class
var length = $(".sortable").length;
//chck if count is less then length
while (count < length) {
//create empty arry
data = []
//loop thorugh uls .. li
$("ul:eq(" + count + ") li").each(function(index, element) {
data.push($(this).text())//push data in array
});
positions.push(data)//push datas in outer array
count++;//increment
}
console.log(positions)
});
$('.ui-state-default').dblclick(function(event) {
$this = $(this);
$this.attr('contenteditable', "true");
$this.blur();
$this.focus();
});
});.sortable {
display: flex;
flex-direction: column;
}
.sortit {
display: flex;
flex-direction: row;
}
.sortable {
margin: 0;
padding: 0;
width: 20%;
}
.sortable li {
margin: 0 3px 3px 3px;
padding: 20px;
user-select:text;
font-size: 2vw;
height: 18px;
background: gainsboro;
list-style-type: none;
}
.sortable li span {
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<h1>Sort listing using drag & drop</h1>
<div class="sortit">
<ul class="sortable">
<li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="8"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
<li class="ui-state-default" id="9"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
<li class="ui-state-default" id="10"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="11"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
<li class="ui-state-default" id="12"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
<li class="ui-state-default" id="13"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
<li class="ui-state-default" id="14"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
</ul>
</div>
<p>Drag and drop list to reposition...</p>
<button id="btn">Get positions and save them into an array of arrays</button>
<div class="show"></div>
<script src="script.js"></script>
</body>
</html>如您所见，我在每个 li 上都附加了一个事件处理程序，您可以双击每个块并尝试编辑其内容.
As you see I've attached an event handler to each li and you can double click on each block and try to edit the content of it.
问题是在正常的可编辑内容中，当您双击所有内容时，都可以通过光标选择内容的每个部分，但是在这里，我只能使用键盘来删除内容.
The issue is in a normal editable content when you double click you select all the content and you can select each part of the content by cursor but here I only can remove the content by using keyboard.
我该如何解决?
推荐答案
请考虑以下内容.
$(function(e) {
function enableEdit(e) {
var $this = $(e.target);
$this.closest(".ui-sortable").enableSelection();
var cnt = $this.text();
$this.off("dblclick")
.addClass("editing");
var inp = $("<input>", {
val: cnt
}).css({
width: "60px",
marginTop: "-10px"
});
$this.html(inp);
$this.find("input").focus();
}
function prepareEdits(o) {
o.dblclick(enableEdit);
$(document).click(clickOff);
$(".sortit").on("keyup", ".editing > input", function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
$(document).click();
}
});
}
function disableEdit(o) {
o.closest(".ui-sortable").disableSelection();
o.removeClass("editing");
prepareEdits(o);
}
function clickOff(e) {
if ($(e.target).hasClass("editing") || $(e.target).parent().hasClass("editing")) {
return;
}
var $this = $(".editing");
var cnt = $this.find("input").val();
$this.html("<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>" + cnt);
disableEdit($this);
}
prepareEdits($('.ui-state-default'));
$(".sortable").sortable({
connectWith: ".sortable" //use this to connect with other uls
});
$(".sortable").disableSelection();
$("#btn").on("click", function() {
const positions = [];
var count = 0;
//get length of all sortable class
var length = $(".sortable").length;
//chck if count is less then length
while (count < length) {
//create empty arry
data = []
//loop thorugh uls .. li
$("ul:eq(" + count + ") li").each(function(index, element) {
data.push($(this).text()) //push data in array
});
positions.push(data) //push datas in outer array
count++; //increment
}
console.log(positions)
});
});.sortit {
display: flex;
flex-direction: row;
}
.sortable {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 20%;
}
.sortable li {
margin: 0 3px 3px 3px;
padding: 20px;
user-select: text;
font-size: 2vw;
height: 18px;
background: gainsboro;
list-style-type: none;
}
.sortable li.editing {
background-color: CadetBlue;
color: AntiqueWhite;
}
.sortable li span {
position: absolute;
margin-left: -17px;
}<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<h1>Sort listing using drag & drop</h1>
<div class="sortit">
<ul class="sortable">
<li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="8"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
<li class="ui-state-default" id="9"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
<li class="ui-state-default" id="10"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
</ul>
<ul class="sortable">
<li class="ui-state-default" id="11"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
<li class="ui-state-default" id="12"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
<li class="ui-state-default" id="13"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
<li class="ui-state-default" id="14"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
</ul>
</div>
<p>Drag and drop list to reposition...</p>
<button id="btn">Get positions and save them into an array of arrays</button>
<div class="show"></div>与其使用内容编辑"，还可以轻松地将其替换为文本字段".这样可以更好地处理文本.在这里，您可以看到双击事件将在何处启用编辑功能.然后，用户可以根据需要突出显示或单击文本字段.如果他们按 Enter 或单击文本字段之外的内容，它将保存更改.
Instead of using Content Edit, can easily replace the item with a Text Field. This will give you better manipulation of the text. Here you can see where a double click event will enable editing. The user can then highlight or click in the text field as needed. If they hit Enter or click out of the text field, it will save the changes.
这篇关于不可通过光标或双击选择可编辑的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
