Question

我决定尝试将Notes程序作为学习体验。问题在于我自己解决问题，但我对于为什么这样做无法解决也很无能为力。

当我按Shift +双击一个音符重命名时，音符从<div>变为<input>，但CSS保持不变。当我按回车（提交输入）时，更改回<div>，并且CSS就在那里，但它非常小，并且没有采用文本的形状。知道为什么吗？谢谢！

代码：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<button class="newList" onclick="newNote()">Create a new note</button>

<br></br>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

function clickNote(){
  if(event.shiftKey){
    $( "div" ).click(function() {
      $( this ).replaceWith( "<tr><td><form'><input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>" + "</input></form></td></tr>" );
    });
  } else {
    location.href='list.html';
  }
}

function enter(event){
  var enter = event.which;
  if (enter == 13){
  var input = document.getElementById("newListName");
    $( "input" ).keyup(function() {
      $( this ).replaceWith( "<tr><td><div class='list' id='list' onclick='clickNote()'>" + input.value + "</div></td></tr>" );
    });
  }
}

function newNote(){
  var newNt = document.createElement("DIV");
  var text = "Rename with Shift + Double Click"
  newNt.textContent = text;
  newNt.setAttribute('class', 'list');
  newNt.setAttribute('id', 'list');
  newNt.setAttribute("onclick", "clickNote()");
  document.body.appendChild(newNt);
}

</script>

</body>
</html>

CSS：

:root {
  --main-color: #FFE033;
  --secondary-color: #FEC82A;
}

.newList {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.list {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.rename {
  height: 2.5em;
  width: 116%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

#list {
  cursor: pointer;
}

Answer 1

我不确定你为什么要这样做，但你在div周围添加了td tr，这使得它成为一个表并创建此问题，因为宽度是用10%定义的。删除它，它应该工作正常。您还需要更正input标记。

function clickNote() {
  if (event.shiftKey) {
    $("div").click(function() {
      $(this).replaceWith("<input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>");
    });
  } else {
    location.href = 'list.html';
  }
}

function enter(event) {
  var enter = event.which;
  if (enter == 13) {
    var input = document.getElementById("newListName");
    $("input").keyup(function() {
      $(this).replaceWith("<div class='list' id='list' onclick='clickNote()'>" + input.value + "</div>");
    });
  }
}

function newNote() {
  var newNt = document.createElement("DIV");
  var text = "Rename with Shift + Double Click"
  newNt.textContent = text;
  newNt.setAttribute('class', 'list');
  newNt.setAttribute('id', 'list');
  newNt.setAttribute("onclick", "clickNote()");
  document.body.appendChild(newNt);
}

:root {
  --main-color: #FFE033;
  --secondary-color: #FEC82A;
}

.newList {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.list {
  height: inherit;
  width: 10%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

.rename {
  height: 2.5em;
  width: 100%;
  padding: .4%;
  position: relative;
  border-bottom: 4px solid var(--secondary-color);
  background: var(--main-color);
}

#list {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="newList" onclick="newNote()">Create a new note</button>

CSS不适用于提交的输入

1 个答案: