文字在文本区域中闪烁

Question

我有以下代码：

i = 0;
function add_task(){
    return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}

#pos{
        position: absolute;
        bottom: 25px;
        text-align:center;
        }
    
    form{
        padding-left:70px;}
        
    h1{padding:50px; color:blue}
    
    #body {border:5px solid black;}

        <form name="form1">
        <label for="addtask">Add task : </label>
        <input type="text" id="addtask"/>
        <button id="ad" onclick="add_task()">Add task</button><br><br>
        <label style="vertical-align:top;">Task list :</label>
        <textarea id="tasklist" rows=10>
        </textarea>
        <div id="pos">
            <label for="nexttask">Next task : </label>
            <input type="text" id="nexttask"/>
            <button id="nt" onclick="next_task">Show Next task</button><br>
    
    </div>
    </form>

我需要复制在文本框中输入的文本并粘贴到文本区域中。但是文本像眨眼一样立即显示和擦除。我希望它永久显示。

请指导！

Answer 1

<button>s，默认为type="submit"，所以点击就是提交你的表单。将 type="button" 添加到您的按钮。

Answer 2

这是一个工作版本。我认为您的问题是，如果未指定类型，表单中的按钮将默认键入 submit。

i = 0;
function add_task(){
    return document.getElementById("tasklist").value += (document.getElementById("addtask").value+"\n");
}

function formSubmitted(e) {
  // Handle form submit, if needed
  return false;
}

function next_task() {
  // Not yet implemented
}

#pos{
  position: absolute;
  bottom: 25px;
  text-align:center;
}
    
form{
  padding: 1rem;
}

h1{
  padding: 1rem;
  margin: 0;
  color: blue;
}

#body {
  border: 5px solid black;
}

<header>
  <h1>To Do list</h1>
</header>

<form name="form1" onsubmit="return formSubmitted(event)">
  <label for="addtask">Add task : </label>
  <input type="text" id="addtask"/>
  <button id="ad" onclick="add_task()">Add task</button><br><br>
  <label style="vertical-align:top;">Task list :</label>
  <textarea id="tasklist" rows=10></textarea>
  <div id="pos">
    <label for="nexttask">Next task : </label>
    <input type="text" id="nexttask"/>
    <button id="nt" onclick="next_task">Show Next task</button><br>
  </div>
</form>

文字在文本区域中闪烁

text blinking in textarea

html

javascript

css