我正在创建一个简单的 Web 应用程序，其中客户端在文本区域字段中键入的内容也会出现 同时在服务器端文本区域字段上。
将其想象为 2 个选项卡，在一个选项卡中，用户在文本区域上书写，而在另一个选项卡上，用户可以同时看到用户输入的内容。
下面是两个jsp文件的代码片段
client.jsp
<%
code=request.getParameter("code_area");
out.print(code);
try
{
File file=new File("code");
if(file.exists())
{
BufferedWriter bw=new BufferedWriter(new FileWriter(file));
bw.write(code);
bw.close();
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>
<form action="client.jsp">
<textarea name="code_area"> <%=code%> <textarea>
</form>
server.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server</title>
<%@page import="java.io.*"%>
<script>
setTimeout("location.reload(true);",1000);
</script>
</head>
<body>
<%
InputStreamReader reader=new InputStreamReader(new FileInputStream("code"));
BufferedReader in=new BufferedReader(reader);
String s;
while((s=in.readLine())!=null)
out.print(s);
%>
</body>
</html>
换句话说，用户在客户端的文本区域字段中键入的任何内容都会同时显示在服务器端。
我针对这个问题想到的解决方案..
我创建了一个通用文件，以便用户在客户端的文本区域上键入的任何内容都会保存在文件中，并且服务器端同时从文本文件中读取。
但遗憾的是我无法对其进行编码..因为我在此遇到的问题..
每次我保存文件时，文本区域中的光标都会到达我不希望发生的行的开头...？
为了将数据保存到文本文件中，我需要单击提交按钮...自动提交 我在这个例子中尝试过 http://www.formget.com/javascript-auto-submit-form/#不工作....
有人可以帮我解决这个问题吗？ 任何帮助将不胜感激...
最佳答案
我对这个问题的新理解(通过评论)是......有一位老师想要实时查看学生的所有输入，每个学生有1个输入区域，老师有每个学生的显示输入但无法编辑。
我们将创建 2 个 HTML 文档和 2 个 PHP API。第一个 HTML 文档供学生输入姓名，然后是一个文本区域供学生输入答案。第二个 HTML 文档网将供教师查看所有答案。第一个 API 将供学生提交答案(每次按键后~实时)。第二个 API 将供教师检索所有学生的答案(使用较小的刷新间隔来模拟实时，而无需使用 WebSockets)。
此外，您还应该在此目录/文件夹中创建一个名为“answers”的目录/文件夹，如果您使用的是 Mac/Linux，请授予“answers”目录/文件夹 0777 权限。
Student.html
<html>
<head>
<title>Student</title>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
$(function () {
$("#answer").on("keyup", function (e) {
$.post("sendAnswer.php", {name: $("#name").val(), answer: e.target.value}, function(){console.log(arguments)});
});
$("#name").on("blur", function(e){
if(e.target.value.length>0)
$("#answer").attr("disabled", false);
});
});
</script>
</head>
<body>
<label for='name'>Who are you?</label>
<input type='text' id='name' Placeholder='Name' />
<br><br>
<textarea id='answer' placeholder='Answer' disabled></textarea>
</body>
</html>
Teacher.html
<html>
<head>
<title>Teacher</title>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
$(function(){
refresh_answers();
window.setInterval(refresh_answers, 500); // Refresh Every 500ms (0.5 seconds)
});
function refresh_answers(){
$.get("getAnswers.php", function(x){
x = JSON.parse(x);
var s = ""; // HTML string
for(var i=0;i<x.length;i++){
s+="<div><span class='name'>"+x[i].name+"</span><span class='answer'>"+x[i].answer+"</span></div>";
}
$("#answers").html(s);
});
}
</script>
<style>
#answers div {
display: inline-block;
width: 256px;
height: 256px;
border: 1px solid black;
margin: 16px;
}
#answers .name {
display: block;
width: 256px;
height: 56px;
text-align: center;
font-size: 25px;
line-height: 56px;
font-weight: 700;
border-bottom: 1px solid black;
}
#answers .answer {
display: block;
padding: 16px;
font-size: 14px;
}
</style>
</head>
<body>
<div id='answers'></div>
</body>
</html>
sendAnswer.php
<?php
file_put_contents(dirname(__FILE__)."/answers/".$_POST['name'].".txt", $_POST['answer']);
?>
getAnswers.php
<?php
$answers = glob(dirname(__FILE__)."/answers/*");
$answers_array = array();
foreach($answers as $a){
$answer = array();
$answer['answer'] = file_get_contents($a);
$name = explode("/", $a);
$name = array_pop($name);
$name = str_replace(".txt", '', $name);
$answer['name'] = $name;
array_push($answers_array, $answer);
}
print_r(json_encode($answers_array));
?>
关于javascript - 同步 html 中的文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28617135/