Question

我正在创建一个简单的Web应用程序，其中textarea字段上的任何客户端类型也会出现在服务器端textarea字段同时。

想象它为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>

换句话说，客户端的textarea字段上的用户类型同时出现在服务器端。

我认为这个问题的解决方案..

我创建了一个公共文件，以便客户端中textarea上的任何用户类型都保存在文件中，服务器端同时从文本文件中读取。

但遗憾的是我无法编码..因为我在这面临的问题......

每次我保存文件时，textarea中的光标都会到达我不希望发生的行的开头......？

为了将数据保存到文本文件中，我需要点击提交按钮...自动提交我试过这个例子http://www.formget.com/javascript-auto-submit-form/#是不行的......

有人可以帮我解决这个问题吗？任何帮助都将受到高度赞赏...

Answer 1

我对这个问题的新理解（通过评论）是......有一位老师希望实时看到学生的所有投入，每个学生有1个输入区域，老师有每个学生的展示输入但无法编辑它们。

我们将创建2个HTML documnet sand 2 PHP API。第一个HTML文档供学生输入他们的名字，然后是文本区域，供他们输入答案。第二个HTML documnet将供教师查看所有答案。第一个API将由学生提交答案（每次按键后〜实时）。第二个API将由教师检索所有学生的答案（使用较小的刷新间隔来模拟实时而无需使用WebSockets）。

此外，你应该在这个名为＆＃34; answers＆＃34;的目录/文件夹中创建一个目录/文件夹。如果你是Mac / Linux将权限0777授予＆＃34;答案＆＃34;目录/文件夹。

<强> 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));
?>

Answer 2

这可以通过WebSockets完成，但设置起来会更复杂，但它会更合适，更快。

对于一个简单的解决方案（没有WebSockets），您需要做的是每次按下键时向服务器发送一个ajax POST请求，这可能非常慢，但它应该可以工作。在这里，我将在客户端使用jQuery，在服务器端使用PHP。

<强> HTML

<input id='input' />

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
    file_put_contents("input.text", $_POST['text']);
?>

每次在输入中输入字符时，都应将其输入保存到服务器上名为input.txt的文本文件中。

Answer 3

看看这个插件，我认为它会做你想做的事情：

https://togetherjs.com/

在html中同步文本区域

3 个答案: