Question

当我按下Enter键将我的行放在<p>中时，我想要更确切地说：

<p>HELLO</p>
<p>Another line</p>
<p>Line 3</p>

在数据库中上传这样的内容

这是我想要执行此操作的代码

<div class="form-group">
    <label for="phone-pin">Text</label>
    <textarea type="text" class="form-control" id="text-area-first" name="text-area-first" required placeholder="text"></textarea>
</div>

Answer 1

这是一个解决方案。

＆＃13;

function store() {
  var txt = document.getElementById("text-area-first").value;

  var txttostore = '<p>' + txt.replace(/\n/g, "</p>\n<p>") + '</p>';

  console.log(txttostore);
}

＆＃13;

<div class="form-group">
  <label for="phone-pin">Text</label>
  <br>
  <textarea type="text" class="form-control" id="text-area-first" name="text-area-first" required placeholder="text"></textarea>
  <br>
  <button id="store" onclick="store()">Store</button>
</div>

＆＃13;

Answer 2

您可以使用javascript onkeypress事件来完成此操作。

我们知道Enter有键码13然后匹配该键码并完成你的工作。

将值赋给变量并将该变量存储到数据库中。

＆＃13;

<html>
<body>
<textarea name="text" id="texta" onkeypress="myFunction(event)"></textarea>
<p id="demo"></p>
<script>
function myFunction(event) {
    var x = event.keyCode;
    var res;
    if(x==13){
      res="&ltp&gt" + document.getElementById("texta").value +"&lt/p&gt";
      document.getElementById("demo").innerHTML = res;
    }
}
</script>
</body>
</html>

＆＃13;

希望它会有所帮助。

Answer 3

出于好奇，您是否想要获取新行以保存到您的数据库？

如果是这样，你使用PHP。你可以做到

$a=nl2br($_POST('text-area-first'));

这将保存数据库中的<br>标记

因此，每当您在textarea中输入时，它也会保存<br>标记。

Answer 4

HRK！其中有几个很接近，但考虑到你需要三个不同的组件。

在p标签中放置要放置文本的ID和作为文本来源的输入。这是必要的，因为在Javascript中你需要找到它们中的每一个。
```
<p id="waitingForText"></p>
<input type="text" id="textSource"></input>
```
您需要有一个事件，它将触发在段落中存储文本的过程。我认为Pirate使用enter键有一个很好的建议。 Pugazh建议一个按钮。我在这里都包括了。请注意，我已将onkeypress事件添加到步骤1中描述的相同输入标记。
```
<button onclick="TextEvent()">Click</button>
<input type="text" id="textSource" onkeypress="KeyEvent(event)"></input>
```

最后一步是将所有内容联系在一起的脚本。在这种情况下，我们将有一个函数来捕获回车键（按照Pirate的想法），然后用按钮调用的函数统一它。这样做很重要，因为我们只有一个函数，其中包含存储文本的代码。

<script>
function TextEvent()
{
  var destination = document.getElementById("waitingForText");
  var source = document.getElementById("textSource")
  destination.innerHTML = source.value;
}

function KeyEvent(event)
{
  if(event.keyCode==13)//as Pirate suggests or any other char
  {
    TextEvent();//call the same method to move text
  }
}
</script>

那就是它。

如何将文本区域中的文本放入段落中？

4 个答案: