如何将输入表单中的文本移动到 div答案

【问题标题】：How do i move text within an input form to a div如何将输入表单中的文本移动到 div
【发布时间】：2020-04-22 19:13:37
【问题描述】：

我正在制作一个待办事项列表网站，它将表单框中输入的内容移动到右侧的 div 中。

这是网站的图片： To do list site

我试图让它发挥作用，当您在表单框中输入“洁净室”时，它会在右侧的 div 中显示为文本。

我确定我需要使用 java 脚本，有人能指出正确的方向吗？

我的 HTML 和 CSS：

* {
    margin: 0;
    background-color: rgb(27, 27, 27);
    font-family: 'Indie Flower', cursive;
}

h1 {
    font-size: 5.5vw;
    color: rgb(241, 240, 240);
    display: flex;
    justify-content: center;
    margin-top: 50px;
    letter-spacing: 1px;
}

.main {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 1vw;
    color: rgb(241, 240, 240);
    letter-spacing: 2px;
}

.left {
    display: flex;
    flex-direction: column;
}

.left h2 {
    padding-bottom: 50px;
}

.left form {
    border: 4px solid rgb(102, 181, 255);
    border-radius: 5px;
}

.left form input {
    height: 30px;
    width: 100%;
    color: rgb(241, 240, 240);
    font-size: 24px;
    letter-spacing: 1px;
    border: none;
}

.box {
    border: 5px solid black;
    border-radius: 7px;
    background-color: rgb(255, 234, 176);
    width: 600px;
    height: 68vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="text/javascript" href="javascript.js">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
    <title>My to do list</title>
</head>
<body>
    <header>
        <h1>To do list</h1>
    </header>
    <section class="main">
        <div class="left">
            <h2>Please Enter your things to do here..</h2>
            <form action="">
                <input type="text">
            </form>
        </div>

        <div class="box">

        </div>
    </section>
</body>
</html>

非常感谢。

【问题讨论】：

input.addEventListener('change', () => div.innerText = input.value)
这可能对你有用stackoverflow.com/questions/28351515/…

标签： javascript html css forms function

【解决方案1】：

有几个概念你应该查一下：

如何使用querySelector或其他方法将DOM元素赋值给变量：

const input = document.querySelector('input')
const div = document.querySelector('.box')

事件和事件监听器。在您的情况下，您将不得不使用 addEventListener 聆听对 <input> 元素所做的更改：
```
input.addEventListener('change', callback)
```
如何使用innerText修改DOM元素的内容：
```
div.innerText = input.value
```

然后，把它们放在一起

const input = document.querySelector('input')
const div = document.querySelector('.box')
input.addEventListener('change', () => {
    div.innerText = input.value
})

【讨论】：

【解决方案2】：

这可能与待办事项相去甚远，但它会让您清楚地知道该做什么。

const box = document.querySelector('.box');
let inputTodo = document.getElementById('inputTodo');

const inputTodoHandler = (event) => {
  if(event.which == 13 || event.keyCode == 13) {
     addTodo(event.target.value);
     event.target.value = '';
     return false;
  }
}

const addTodo = (todo) => {
  const p = document.createElement('p');
  p.textContent = todo;
  box.appendChild( p );
}

inputTodo.addEventListener('keydown', inputTodoHandler );

* {
    margin: 0;
    background-color: rgb(27, 27, 27);
    font-family: 'Indie Flower', cursive;
}

h1 {
    font-size: 5.5vw;
    color: rgb(241, 240, 240);
    display: flex;
    justify-content: center;
    margin-top: 50px;
    letter-spacing: 1px;
}

.main {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 1vw;
    color: rgb(241, 240, 240);
    letter-spacing: 2px;
}

.left {
    display: flex;
    flex-direction: column;
}

.left h2 {
    padding-bottom: 50px;
}

.left form {
    border: 4px solid rgb(102, 181, 255);
    border-radius: 5px;
}

.left form input {
    height: 30px;
    width: 100%;
    color: rgb(241, 240, 240);
    font-size: 24px;
    letter-spacing: 1px;
    border: none;
}

.box {
    border: 5px solid black;
    border-radius: 7px;
    background-color: rgb(255, 234, 176);
    width: 600px;
    height: 68vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="text/javascript" href="javascript.js">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
    <title>My to do list</title>
</head>
<body>
    <header>
        <h1>To do list</h1>
    </header>
    <section class="main">
        <div class="left">
            <h2>Please Enter your things to do here..</h2>
            <form action="" onsubmit="return false;">
                <input type="text" id="inputTodo">
            </form>
        </div>

        <div class="box">

        </div>
    </section>
</body>
</html>

【讨论】：

【解决方案3】：

给你一个思路的最短方法是粗略地使用事件监听器来处理输入字段中的按键。

此外，由于您要创建某种列表，因此您需要在按下 Enter 键后向目标内容添加输入新值，并用行尾字符分隔行。

注意：这里不需要使用form标签作为通常用于与服务器端脚本交换数据的表单。

var el = document.getElementById('src_txt');
var dest = document.getElementsByClassName('box')[0];
el.addEventListener('keypress', function(ev) {
	if (ev.keyCode == 13) {
		dest.innerText += (el.value + "\n");
	}
});

* {
    margin: 0;
    background-color: rgb(27, 27, 27);
    font-family: 'Indie Flower', cursive;
}

h1 {
    font-size: 5.5vw;
    color: rgb(241, 240, 240);
    display: flex;
    justify-content: center;
    margin-top: 50px;
    letter-spacing: 1px;
}

.main {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 1vw;
    color: rgb(241, 240, 240);
    letter-spacing: 2px;
}

.left {
    display: flex;
    flex-direction: column;
}

.left h2 {
    padding-bottom: 50px;
}

#src_txt {
    height: 30px;
    width: 100%;
    color: rgb(241, 240, 240);
    font-size: 24px;
    letter-spacing: 1px;
    border: 4px solid rgb(102, 181, 255);
    border-radius: 5px;
}

.box {
    border: 5px solid black;
    border-radius: 7px;
    background-color: rgb(255, 234, 176);
    width: 600px;
    height: 68vh;
    color: #000;
    font-size: 12px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="text/javascript" href="javascript.js">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
    <title>My to do list</title>
</head>
<body>
    <header>
        <h1>To do list</h1>
    </header>
    <section class="main">
        <div class="left">
            <h2>Please Enter your things to do here..</h2>
                <input type="text" id='src_txt'>
        </div>

        <div class="box">

        </div>
    </section>
</body>
</html>

【讨论】：

【解决方案4】：

这样的事情应该可以解决问题。 event.preventDefault() 阻止表单提交到您的服务器。

function moveit(){

event.preventDefault();
var inputs = document.getElementsByTagName('input');
var input = inputs[0].value;

var box = document.getElementById('box');

var before = box.innerHTML
var after = before + '<br/>'+ input;


box.innerHTML=after;



}

* {
    margin: 0;
    background-color: pink;
   
}

h1 {
    font-size: 5.5vw;
    color: rgb(241, 240, 240);
    display: flex;
    justify-content: center;
    margin-top: 50px;
    letter-spacing: 1px;
}

.main {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 1vw;
    color: rgb(241, 240, 240);
    letter-spacing: 2px;
}

.left {
    display: flex;
    flex-direction: column;
}

.left h2 {
    padding-bottom: 50px;
}

.left form {
    border: 4px solid rgb(102, 181, 255);
    border-radius: 5px;
}

.left form input {
    height: 30px;
    width: 100%;
    color: rgb(241, 240, 240);
    font-size: 24px;
    letter-spacing: 1px;
    border: none;
}

#box {
    border: 5px solid black;
    border-radius: 7px;
    background-color: rgb(255, 234, 176);
    width: 600px;
    height: 68vh;
    color:black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>My to do list</title>
</head>
<body>
    <header>
        <h1>To do list</h1>
    </header>
    <section class="main">
        <div class="left">
            <h2>Please Enter your things to do here..</h2>
            <form onsubmit="moveit();">
                <input type="text" ><br/>
                <input type='submit' value='submit' >
                
            </form>
        </div>

        <div id="box">

        </div>
    </section>
</body>
</html>

【讨论】：

【解决方案5】：

使用 sql 或任何将信息存储在云中的服务器在您的网站中使用数据库系统，从而在您的正确/所需位置存储/编辑/删除和访问数据库

【讨论】：