JavaScript/HTML|使HTML段落等于用户输入

JavaScript/HTML | Making HTML paragraph equal to User Input

本文关键字：HTML 用户 输入 于用户 段落 JavaScript      更新时间：2023-09-26

我是HTML的初学者，我想知道如何使HTML正文中的段落等于用户使用JavaScript函数写入HTML正文中文本框中的文本。有办法做到这一点吗？还有一个问题：当用户点击"提交"按钮时，会发生什么？HTML是否将用户的所有输入都写入变量？

（编辑）所以，这是我的代码（HTML）：

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
    <link href="stylesheet.css" rel="stylesheet">
</head>
<body>
    <div class="input-text">
        <input type="user-answer" id="uA1">
        <p id="paragraph"></p>
        <input type="button" onClick="inp.input();" value="Write Text">
    </div>
</body>
</html>

JavaScript:

var inp = document.getElementById('uA1');
var p = document.getElementById('paragraph');
inp.addEventListener('input', function() {
    p.textContent = inp.value;
});

它仍然不起作用。

单击"提交"按钮时，浏览器将包含该按钮表单的内容序列化为url编码字符串（name1=value1&name2=value2&etc=etc），并执行form标记中描述的http请求（action和method属性）。它不会创建任何变量或保存其。所有值都已保存在表单元素（DOM树的节点）的属性中。

若要将您的输入与段落同步，您必须向该输入添加事件侦听器，如果用户在其中插入任何文本，则该侦听器将侦听，然后使用输入值作为段落的文本内容。

var inp = document.getElementById('myArea');
var p = document.getElementById('myP');
inp.addEventListener('input', function(){
    p.textContent = inp.value;
});

请在jsFiddle上查看。

您可以看到，在本例中，我使用了textareaDOM节点的属性value（由其id选择）。这是存储表单数据的地方，但直到您单击"提交"按钮。

对于用户单击"提交"按钮时会发生什么的问题，通常输入中包含的所有信息都存储在php变量中。我认为你不想使用php，但这很容易：

<form method = "post" action = "next.php">
    <div>
        <input id = "id" name = "id" placeholder = "your id here..." />
        <input id = "pass" name = "pass" placeholder = "your pass here..." />
    </div>
    <div>
        <input id = "btn_valid" value = "Valid information" />
    </div>
</form>

在这个例子中，我制作了一个简短的表单，有两个输入，让用户输入他的id和密码。如果您指定了"name"标记（就像我在两个输入"id"answers"pass"中所做的那样），您将能够在php"next.php"文件中获得它们，如下所示（在另一个页面中，在本例中是在页面"nextphp"中）：

<?php
    $id = $_POST['id'];
    $pass = $_POST['pass'];
?>

因为您在表单参数中指定了转到"next.php"，所以您可以通过调用"$_POST['name-of-the-input']"来获取这些数据。它适用于所有可以有"name"标记的元素！

最后，php文件可以包含html、javascript或php代码！但您需要通过服务器（如Xampp）来执行它。

相关文章：