Question

我正在努力让facebook风格的用户输入系统。但我有一个关于按键的问题。

所以我的代码工作正常，但我想改变其他东西，如keypress，keyup，paste等。

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

如果if ($.trim(updateval).length > 13) { send with 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>

Answer 1

我对您的代码和应用有一些评论：

首先，正如@ rory-mccrossan所提到的，除非你拥有facebook，google或microsoft的基础设施......，我认为使用Ajax代替真是个坏主意Websockets 用于聊天等实时应用。
现在关于你的代码，我不知道你的PHP脚本在幕后做了什么，但我认为你不需要发送两个请求来指示用户是否输入，你可以限制用户输入时发送的一个请求，否则他肯定不会打字。当然，您可以在getTyping.php脚本中使用某种超时来限制“键入”状态的生命周期（例如5秒），因此如果在超时后发送请求，您可以知道您的用户没有输入。
关于你当前的问题，我认为这是因为当textarea为空时，“不打字”状态才会被触发，所以当然，在停止写入后，当前文本的长度超过13，因此，“不打字”状态永远不会被解雇（发送），这就是为什么你需要超时，正如我在第二点告诉你的那样......
此外，在使用getTyping.php脚本获取状态时不要忘记缓存问题，该脚本应该不可缓存（或者至少在非常有限的时间内）...
< / LI>
然后，我在你发布的代码中没有看到任何识别当前用户的信息以及与他一起转换的信息...也许你没有在问题中包含这些信息，我不知道！

...

希望可以提供帮助。

Answer 2

我的建议是有外部setInterval，每隔3秒保存oldValue变量中的当前文本，并将currentText与oldValue进行比较，如果它们相等则用户停止写入然后将ajax发送到notyping.php

Answer 3

您的更新代码如下我创建了一个getTyping函数，如果用户开始输入，每隔1秒就会调用一次。

在get getTyping setinterval函数中我调用了函数check_which_function。

在函数check_which_funciton中我通过在textarea值长度上应用条件来使用你的代码，这是if else语句的嵌套，所以现在

如果用户开始输入但内容长度为= 0而不是

$ .trim（typingval）.length == 0将执行，直到长度不等于12

如果内容的长度等于13而不是

$ .trim（typingval）.length＆gt; 13将执行

默认情况下getTyping2（）函数正在执行此函数getTyping.php ajax调用正在进行

<script>
    (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);


    function getTyping2() {
        var tpy = $('#tpy').val();
        $.ajax({
            type: "POST",
            url: "/getTyping.php",
            data: {tpy: tpy},
            success: function (data) {
                $('#s').html(data);
            }
        });
    }
    function check_which_action() {
        $('#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) {

                }
            });
        }

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

                }
            });
        }
        else {
            getTyping2() ;
        }

    });
    }
    function getTyping() {
        setInterval(check_which_action, 1000);
    }
    getTyping();

</script>

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

用于聊天的Ajax用户键入消息

3 个答案: