我正在尝试做一个“待办事项列表”。但是遇到了这个问题。 (实际上有两个)。
所以这是我的代码:
function toElement() {
var z = document.getElementById("input").value;
if (z == "") {
return
}
var x = document.createTextNode(z)
var y = document.createElement("li");
y.appendChild(x);
document.getElementById("list").appendChild(y);
document.getElementById("input").value = '';
var a = document.getElementById("input")
a.style.width = 270 + 'px';
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
body {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(174, 174, 174, 1) 100%);
background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(174, 174, 174, 1) 100%);
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(174, 174, 174, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#aeaeae", GradientType=1);
user-select: none;
}
#title {
font-family: 'Raleway', sans-serif;
font-size: 50px;
margin-top: 5%;
font-weight: bold;
text-align: center;
}
#input {
min-width: 270px;
height: 40px;
border: none;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 25px;
padding-left: 25px;
padding-right: 25px;
text-align: center;
outline: none;
}
#input:focus {
outline: none;
border: solid 2px;
border-image: linear-gradient(90deg, #0cebeb, #20e3b2, #29ffc6);
border-radius: 0px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<p id="title" title="To do list">To Do List</p>
<div class="container">
<form action="javascript:toElement()">
<input type="text" id="input" oninput="this.style.width = 0; this.style.width = this.scrollWidth + 'px'" placeholder="Enter an activity...">
<button id="submit" type="submit">Add</button>
</form>
</div>
<ul id="list">
<li id="obj_1">Test 1</li>
<li id="obj_2">Test 2</li>
<li id="obj_3">Test 3</li>
<li id="obj_4">Test 4</li>
<li id="obj_5">Test 5</li>
</ul>
如果有人能帮助我,我将不胜感激。
border-image: linear-gradient(90deg, #0cebeb, #20e3b2, #29ffc6) 1;
应该这样做。
要禁用自动完成,您可以将
autocomplete="off"
添加到表单标签。