我正在尝试制作一个 facebook 风格的用户输入系统。但我有一个关于按键的问题。

所以我的代码工作正常，但我想更改其他内容，如按键、键盘输入、粘贴等。

我正在使用以下 javascript 和 ajax 代码。在下面，我的 ajax 代码的工作方式类似于 if ($.trim(updateval).length == 0) { send width notyping.php notyping.php posting 0 并且 0 不显示输入消息。

If if ($.trim(updateval).length > 13) { 使用 usertyping.php 发送 usertyping.php 发布 1 并且 1 显示输入消息。

问题就在这里，如果用户停止写一些消息，那么它每次都在说打字。我应该怎么做才能解决这个问题，有人可以在这方面帮助我吗？

所有 ajax 和 javascript 代码都在这里:

;
(function($) {
  $.fn.extend({
    donetyping: function(callback, timeout) {
      timeout = timeout || 1000; // 1 second default timeout
      var timeoutReference,
        doneTyping = function(el) {
          if (!timeoutReference) return;
          timeoutReference = null;
          callback.call(el);
        };
      return this.each(function(i, el) {
        var $el = $(el);
        // Chrome Fix (Use keyup over keypress to detect backspace)
        // thank you @palerdot
        $el.is(':input') && $el.is(':input') && $el.on('keyup keypress paste', function(e) {
          // This catches the backspace button in chrome, but also prevents
          // the event from triggering too premptively. Without this line,
          // using tab/shift+tab will make the focused element fire the callback.
          if (e.type == 'keypress' && e.keyCode != 8) return;

          // Check if timeout has been set. If it has, "reset" the clock and
          // start over again.
          if (timeoutReference) clearTimeout(timeoutReference);
          timeoutReference = setTimeout(function() {
            // if we made it here, our timeout has elapsed. Fire the
            // callback
            doneTyping(el);
          }, timeout);
        }).on('blur', function() {
          // If we can, fire the event since we're leaving the field
          doneTyping(el);
        });
      });
    }
  });
})(jQuery);

检查文本值如果为 0 则发送数据为 0 用户未输入

$('#chattextarea').donetyping(function() {
  var typingval = $("#chattextarea").val();
  var tpy = $('#tpy').val();
  if ($.trim(typingval).length == 0) {
    $.ajax({
      type: "POST",
      url: "/notyping.php",
      data: {
        tpy: tpy
      },
      success: function(data) {

      }
    });
  } 

检查文本值为 >13 然后发送数据为 1 以供用户输入。(可能需要更改此 if 语句)

if ($.trim(typingval).length > 13) {
    $.ajax({
      type: "POST",
      url: "/usertyping.php",
      data: {
        tpy: tpy
      },
      success: function(data) {

      }
    });
  }

});

检查并显示用户输入:

function getTyping(){
     setInterval(function(){
         var tpy = $('#tpy').val();
           $.ajax({
            type: "POST",
            url: "/getTyping.php",
            data: { tpy: tpy },
            success: function(data) {
               $('#s').html(data);
              }
             });
         },1000);
    }   
getTyping();

HTML

<textarea id="chattextarea"></textarea>
<div id="s"></div>

最佳答案

我对您的代码和应用程​​序有一些评论:

• 首先，正如@rory-mccrossan 所提到的，除非您拥有 facebook、google 或 microsoft 的基础设施，...，我认为使用 Ajax 而不是 确实是个坏主意Websockets 用于聊天等实时应用。

• 关于您的代码，我不知道您的 PHP 脚本在幕后做了什么，但我认为您不需要发送两个请求来指示用户是否正在输入，您可以将其限制为在用户键入时发送的一个请求，否则，他肯定没有在键入。当然，您可以在 getTyping.php 脚本中使用某种超时来限制“键入”状态的生命周期(例如 5 秒)，因此如果在该超时后发送请求, 你可以知道你的用户没有打字。

• 关于您当前的问题，我认为那是因为当文本区域为空时才触发“未输入”状态，所以当然，在停止写入并且当前文本的长度超过 13 之后，所以“未输入”状态永远不会被触发(发送)，这就是为什么你需要超时，正如我在第二点中告诉你的......

• 此外，不要忘记使用 getTyping.php 脚本获取状态时的缓存问题，该脚本不应缓存(或至少在非常有限的时间内)...

• 然后，我在您发布的代码中没有看到任何信息来识别当前用户和正在与他一起转换的用户......也许您没有在问题中包含它，我不知道!

...

希望对您有所帮助。

关于javascript - 用于聊天的 Ajax 用户键入消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33974414/