Question

我正在尝试做一个todo应用。我有一些名为可以动态添加的文件夹，我们可以在每个文件夹中添加待办事项。所有列表项都具有contenteditable属性。当我尝试编辑其中一个列表项时，它下面的div的位置会发生变化。我不知道造成这种情况的原因。我已经在这里待了几个小时，但没有发现任何细节。

Image showing the folders getting realigned

＆＃13;

var createFolder = function() {
  var folder = document.createElement("div");
  folder.classList.add("folder");
  folder.innerHTML = '<span id="deleteFolder" onclick="deleteFolder(this)"><i class="fa fa-trash-o"></i></span> ' +
    '<span contenteditable="true" onfocusout="checkIfEmpty(this,\'New Folder\')">New Folder</span>' +
    ' <span id="newItem" class="addItem" onclick="addItem(this)"><i class="fa fa-plus"></i></span>' +
    '<ul class="list">' +
    '<li contenteditable="true" onfocusout="checkIfEmpty(this)" class="bigandspacy">New Item</li>' +
    '</ul>';
  document.getElementById("container").appendChild(folder);
}

var checkIfEmpty = function(e, originalContent) {
  if (e.textContent === "") {
    e.textContent = originalContent || "New Item";
  }
}

var deleteFolder = function(e) {
  console.log(e.parentNode);
  document.getElementById("container").removeChild(e.parentNode);
}

var addItem = function(e) {
  var elem = document.createElement("li");
  elem.innerText = "New Item";
  elem.setAttribute("contenteditable", "true")
  elem.classList.add("bigandspacy");
  e.parentNode.children[3].appendChild(elem);
}

document.getElementById("newFolder").addEventListener('click', createFolder, false);

＆＃13;

body {
  background: #E1E1E4;
}
.container {
  position: fixed;
}
.folder {
  display: inline-block;
  position: relative;
  background: #2A2A33;
  width: 40vh;
  margin: 10px;
  border-radius: 8px;
  color: white;
  font-size: 1em;
  float: left;
  min-height: 50px;
}
.folder:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 30px 30px 0;
  border-style: solid;
  border-color: #666666 #E1E1E4;
}
.folder .fa-trash-o {
  padding: 5px;
  cursor: pointer;
}
.addItem {
  float: right;
  margin-right: 18%;
  margin-top: 2%;
}
li {
  list-style: none;
}
.bigandspacy {
  font-size: 1.2em;
  padding: 5px;
  width: 80%;
  margin-top: 5px;
}
.bigandspacy:focus {
  border: 1px solid white;
}
.bigandspacy:hover {
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button id="newFolder"><i class="fa fa-plus"></i>
</button>
<div id="container"></div>

＆＃13;

提前致谢。

Answer 1

为输入提供透明边框，使其在焦点上不会改变大小：

.bigandspacy{
  font-size: 1.2em;
  padding: 5px;
  width: 80%;
  margin-top: 5px; 
  border: 1px solid transparent;
}

（然后只需更新焦点上的border-color）

更新了小提琴：https://jsfiddle.net/axs5ec89/2/

Answer 2

您可以简单地为焦点样式添加边距 - 这将阻止跳转。

.bigandspacy:focus{
    border: 1px solid white;
    margin:-1px;
}

单击div可更改附近div的位置

2 个答案: