Javascript 在html中同步文本区域_Javascript_Html_Ajax_Jsp

Javascript 在html中同步文本区域

javascript html ajax jsp

Javascript 在html中同步文本区域,javascript,html,ajax,jsp,Javascript,Html,Ajax,Jsp,我正在创建一个简单的web应用程序，其中无论客户机在textarea字段上键入什么，都会显示出来同时在服务器端的textarea字段上想象一下，一个选项卡中有两个选项卡，用户在文本区域写入，而在另一个选项卡上，用户可以看到用户同时键入的内容下面是两个jsp文件代码片段 client.jsp server.jsp 换句话说，无论用户在客户端的textarea字段中键入什么，都会同时显示在服务器端我为这个问题想到的解决办法我创建了一个公共文件，这样无论用户在客户端的textarea上键入什

我正在创建一个简单的web应用程序，其中无论客户机在textarea字段上键入什么，都会显示出来同时在服务器端的textarea字段上

想象一下，一个选项卡中有两个选项卡，用户在文本区域写入，而在另一个选项卡上，用户可以看到用户同时键入的内容

下面是两个jsp文件代码片段

client.jsp

server.jsp

换句话说，无论用户在客户端的textarea字段中键入什么，都会同时显示在服务器端

我为这个问题想到的解决办法

我创建了一个公共文件，这样无论用户在客户端的textarea上键入什么，都会保存在该文件中，服务器端同时读取该文本文件

但遗憾的是，我无法编写它…因为我在这方面面临的问题

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

为了将数据保存到文本文件中，我需要单击提交按钮…自动提交我在这个例子中尝试的方法不起作用

有人能帮我解决这个问题吗？？

非常感谢您的帮助……

这可以通过WebSocket完成，但设置起来要复杂得多，但会更合适、更快

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

HTML

PHP saveInput.PHP

<?php
    file_put_contents("input.text", $_POST['text']);
?>

每次他们在输入中输入一个字符时，这应该会将他们的输入保存到服务器上名为input.txt的文本文件中。

看看这个插件，我想它会满足您的需要：

通过对这个问题的评论，我的新理解是。。。有一位教师希望实时查看学生的所有输入，每个学生有一个输入区域，教师有每个学生输入的显示，但无法编辑

我们将创建2个HTML documnet和2个PHP API。第一个HTML文档供学生输入姓名，然后是一个文本区域供学生输入答案。第二个HTML文档将供教师查看所有答案。第一个API将用于学生在每次按键后实时提交答案。第二个API将用于教师检索所有学生的答案，刷新间隔很短，无需使用WebSocket即可进行实时模拟

此外，您还应该在此目录/文件夹中创建一个名为answers的目录/文件夹，如果您是Mac/Linux，请授予answers目录/文件夹的权限0777

Student.html

Teacher.html

sendAnswer.php

getAnswers.php

首先，服务器端代码没有文本区域，它只是代码，而不是HTML。我假设你希望输入的文本立即保存在一个文本文件中，每个字符都被输入。这不是服务器端。它是坐在另一边的人，他想看到用户在客户端键入的内容同时对他可见。如果你试图创建一个聊天应用程序，那么你为什么不这么说呢。或者更好的方法是用谷歌搜索一下。网上有上千个关于如何创建聊天应用程序的例子。想象一下，一个选项卡中有两个选项卡，用户在文本区域写入，而另一个选项卡上，用户可以看到用户同时在聊天应用程序中键入的内容，您需要单击“发送”或“输入”来发送聊天…但此应用程序不需要这个…自动我们的解决方案看起来很有希望。。给我一点时间来验证一下，当我在google chrome上运行它时，TogetherJS插件充满了很多bug，尽管在mozilla上非常稳定，但实际上是bug还是控制台错误？因为如果你认为一个控制台错误是一个错误，那么不要看facebook、Google或任何主要网站的控制台ir，它们都有数百个错误。你对togetherjs的暗示很好地符合答案。。。谢谢@dustinIn togetherjs有一个每个人都可以访问的公共文本区域…但是在我的应用程序中有一个管理员，有很多用户可以独立访问文本区域…我想让管理员访问任何用户的文本区域，看看他在键入什么。。。如果你能给我一些提示，告诉我怎样才能达到这个目的，我会更兴奋。你可以通过把数字500调高或调低来扰乱第8行老师的刷新间隔。这是刷新之间的毫秒数，数值越低，应用程序的实时性越高，但会减慢/冻结浏览器。数字越高，应用程序会感觉越慢，但不会冻结浏览器。此外，这没有安全性，可能会导致服务器出现重大问题。例如，如果一个学生在回答“我恨你”时加了一句话，老师会得到一个惊喜，不知道是谁做的。或者您可以对PHP本身进行注入攻击

通过转义file\u put\u内容，然后注入他们想要的内容来进行加密。因此，一定要清理数据。这比预期的更令人惊奇……非常感谢@dustin……你的答案比任何其他东西都值得称赞……你让我成为了一个好男人……非常感谢：我发现一个错误，当我在文本区键入时，它在教师中不可见。html……我不知道为什么会发生在新行中在teacher.html的文本区域中不可见。。。这是php的问题吗？？？

<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>

<input id='input' />

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

<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>

<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>

<?php
  file_put_contents(dirname(__FILE__)."/answers/".$_POST['name'].".txt", $_POST['answer']);
?>

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