在html中同步文本区域
[英]Synchronize text area in html
问题描述
I am creating a simple web application in which whatever the client types on textarea field also appears on the server side textarea field at the same time. 
我正在创建一个简单的Web应用程序，在该应用程序中，无论textarea字段上的客户端类型如何，服务器端textarea字段上的客户端类型也会同时显示。
Imagine it as 2 tabs In one tab user writes on text area and on the other tab user sees the whatever the user has typed at the same time. 想象为2个选项卡。在一个选项卡中，用户在文本区域上书写，而在另一个选项卡上，用户可以看到用户同时键入的内容。
Below is the two jsp files code snippet 以下是两个jsp文件的代码片段
client.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 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>
In other Words whatever the user types on the textarea field in the client side appears on the server side at the same time. 换句话说，无论用户在客户端的textarea字段上键入什么内容，都将同时显示在服务器端。
The solution that i thought for this problem .. 我认为这个问题的解决方案..
I created a common file so that whatever user types on textarea in client gets saved in the file and the server side reads from the text-file at the same time. 我创建了一个公共文件，以便无论用户在客户端的textarea上键入什么内容，都将其保存在该文件中，并且服务器端会同时从该文本文件中进行读取。
But sadly i am not able to code it..Because of the problems i am facing in this .. 但是可悲的是我无法编写代码..由于我在此面临的问题..
Everytime i save a file the cursor in the textarea gets to the beginning of the line which i dont want to happen...? 每次我保存文件时，textarea中的光标都会移到我不想发生的行的开头...？
In order to save the data into text file i need to click on submit button ...Auto submit which i tried from this example http://www.formget.com/javascript-auto-submit-form/# is not working .... 为了将数据保存到文本文件中，我需要单击“提交”按钮...我在此示例中尝试过的“自动提交” http://www.formget.com/javascript-auto-submit-form/#不起作用。 ...
Can somebody help me to tackle this problem ?? 有人可以帮我解决这个问题吗？ Any help would be highly appreciated ... 任何帮助将不胜感激...
3 个解决方案
解决方案1
1 已采纳 2015-02-20 19:47:30
My new understanding (through comments) of the question is... There is a teacher who wants to see all the imputs of the students in real time, each student has 1 input area and the teacher has an display of each students input but can not edit them. 我对问题的新理解（是通过评论）是...一位老师想实时查看学生的所有输入，每个学生有1个输入区域，并且老师可以显示每个学生的输入，但是可以不编辑它们。
We will create 2 HTML documnet sand 2 PHP APIs. 我们将创建2个HTML documnet sand 2个PHP API。 The first HTML document is for the student to enter their name and then a text area for them to enter an answer. 第一个HTML文档供学生输入他们的姓名，然后是供他们输入答案的文本区域。 The second HTML documnet will be for the teacher to view all the answers. 第二个HTML documnet将供教师查看所有答案。 The first API will be for the students to submit their answer (after each keypress ~real time). 第一个API将用于让学生提交答案（每次按键后〜实时）。 And the second API will be for the teacher to retrieve all the students answers (with a small refresh interval to simulate real time without having to use WebSockets). 第二个API将用于教师检索所有学生的答案（刷新间隔很小，无需使用WebSockets即可实时模拟）。
Also you should create a directory/folder within this directory/folder named "answers" and if you are are Mac/Linux give permissions 0777 to the "answers" directory/folder. 另外，您还应该在此目录/文件夹中创建一个名为“ answers”的目录/文件夹，如果您是Mac / Linux用户，则将“ answers”目录/文件夹的权限设置为0777。
Student.html 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 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 sendAnswer.php
<?php
file_put_contents(dirname(__FILE__)."/answers/".$_POST['name'].".txt", $_POST['answer']);
?>
getAnswers.php 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));
?>
解决方案2
0 2015-02-19 21:32:45
This can be done with WebSockets but that's way more complicated to set up, but it would be more proper and faster. 这可以使用WebSockets来完成，但是设置起来会更加复杂，但是会更合适，更快。
For an easy solution (without WebSockets), what you need to do is send an ajax POST request to the server every time the key is pressed, this might be really slow but it should work. 对于一个简单的解决方案（没有WebSockets），您需要做的是每次按下该键时向服务器发送一个ajax POST请求，这可能确实很慢，但是应该可以。 Here I will be using jQuery on the client side and PHP on the server side. 在这里，我将在客户端使用jQuery，在服务器端使用PHP。
HTML 的HTML
<input id='input' />
JavaScript / jQuery JavaScript / jQuery
// After DOM ready
$(function(){
// When a character is entered in the input
$("#input").on("keyup", function(e){
// Send the inputs value to the server
$.post("saveInput.php" {text: e.target.value});
});
});
PHP (saveInput.php) PHP （saveInput.php）
<?php
file_put_contents("input.text", $_POST['text']);
?>
This should save their input into a text file called input.txt on the server every time they enter a character in the input. 每当他们在输入中输入一个字符时，这应该将他们的输入保存到服务器上一个名为input.txt的文本文件中。
解决方案3
-2 2015-02-19 21:48:45
Take a look at this plugin I think it will do what you want: 看一下这个插件，我想它将满足您的要求：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.