我正试图通过让用户在输入栏中输入字符串来动态显示一些列表项。
提交时，JS将显示：
- 复选框
- 用户输入的字符串
- 按钮删除输入的字符串
我给了复选框和按钮id，但js不允许我给用户输入的字符串id(文本不能有id(。当我输入一个大字符串时，问题就出现了，它开始将另外两个列表项的子项推出容器。
如何为用户输入的文本设置最大空间？
(JS代码中添加了一些typescript(
function todoList() {
// turn the input text into variable:
const item: string = (<HTMLInputElement>document.getElementById('todoInput')).value;
// Create text-node:
const text = document.createTextNode(item);
// Create list item:
const newItem = document.createElement('li');
// Create button:
const button: any = document.createElement("button");
button.id="button";
// Create button text node and append it to button:
const btnText = document.createTextNode('Delete');
button.appendChild(btnText);
// Add handler to actually delete the entry:
button.addEventListener("click", (e: any) => {
newItem.remove();
});
// create checkbox and give it id and name
const checkbox = document.createElement("input");
checkbox.type="checkbox";
checkbox.id="checkbox";
checkbox.name="form-checkbox";
// Append text,checkbox and button to the list item:
newItem.appendChild(checkbox);
newItem.appendChild(text);
newItem.appendChild(button);
// Append list item to the ordered list:
// @ts-ignore
document.getElementById('todoList').appendChild(newItem);
}
const form = (document.getElementById('todoForm'))
// @ts-ignore
form.addEventListener("submit", (e) => {
e.preventDefault();
// resets input field to blank after user submits task
const resetInput = <HTMLInputElement>document.getElementById('todoInput')
resetInput.value = '';
})*{
margin: 0;
padding: 0;
}
body{
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;;
background: #f5f5f5;
color: #4d4d4d;
font-weight: 300;
display: flex;
flex-direction: column;
align-items: center;
}
.title{
font-size: 100px;
font-weight: 100;
color: rgba(175, 47, 47, 0.15);
}
#todoForm{
display: flex;
flex-direction:row;
width: 30rem;
height: 4rem;
border-width: 0;
box-shadow: 0 3px 9px 3px #cdcaca;
}
#scrolldown-menu-toggle{
border-width: 0;
width: 2rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
background: #ffffff;
color: #b6adad;
opacity: 1;
}
#todoInput{
width: 95%;
border-width: 0;
font-size: 130%;
}
#todoInput:focus{
outline: none;
}
::placeholder {
color: #b6adad;
opacity: 1;
}
#todo-input select:focus{
outline: none !important;
/* ik wil dat bij het selecteren de border niet gehighlight wordt*/
}
li{
display:flex;
flex-direction:row;
width: 30rem;
max-width: 30rem;
height: 4rem;
border-width: 0;
box-shadow: 0 3px 9px 3px #cdcaca;
background: white;
align-items: start;
font-size: 130%;
min-width: 0;
gap: 20px;
}
#checkbox {
width: 1.3rem;
height: 1.3rem;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
appearance: none;
outline: none;
cursor: pointer;
}
#checkbox:checked {
background-color: #b3cbb2;
}
#button{
background: red;
float: right;
width: 100%;
max-width: fit-content;
}
.info{
margin-top: 6rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>To do list</title>
</head>
<body>
<h1 class="title">todos</h1>
<form id="todoForm" onsubmit="todoList()" >
<button id="scrolldown-menu-toggle">˅</button>
<input type="text" id="todoInput" placeholder="Fill in your plan">
</form>
<ol id="todoList">
</ol>
<footer class="info">
<p>Double click to edit a todo.</p>
<p>Created by Thomas Brom.</p>
</footer>
<script src="main.js"></script>
</body>
</html>在你的html输入标签上使用maxlength属性，如下所示：
<input type="text" id="todoInput" placeholder="Fill in your plan" maxlength='12'>或者只需将输入文本附加在段落标记内，并为p标记提供最大宽度并隐藏溢出。