Я пытаюсь создать пользовательскую систему ввода в стиле facebook. Но у меня есть один вопрос о keypress.
Так что мой код работает нормально, но я хочу изменить что-то еще, например keypress, keyup, paste ect.
Я использую следующие коды javascript и ajax. В следующем моем коде ajax работает, как if ($.trim(updateval).length == 0) { send width notyping.php notyping.php posting 0, а 0 не отображает вводное сообщение.
Если if ($.trim(updateval).length > 13) { send with usertyping.php usertyping.php posting 1, а 1 – выводить сообщение для печати.
Проблема здесь, если пользователь остановлен, чтобы набрать какое-то сообщение, а затем каждый раз печатает. Что я должен сделать, чтобы исправить это, кто-нибудь может мне помочь в этом отношении?
Все аякс и код 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, поэтому «не печатать», статус никогда не будет запущен (отправлен), поэтому вам нужен тайм-аут, как я сказал вам во 2-м пункте …
Кроме того, не забывайте проблему с кешем при получении статуса с getTyping.php скрипта getTyping.php который не должен кэшироваться (или, по крайней мере, в течение очень ограниченного периода времени) …
Тогда я не вижу в вашем размещенном коде какую-либо информацию (ы), чтобы идентифицировать текущего пользователя и тот, который конвертирует с ним … возможно, вы не включили это в вопрос, я не знаю!
…
Надеюсь, что это поможет.
Мое предложение здесь иметь внешний setInterval, который каждые 3 секунды сохраняет текущий текст в переменной oldValue и сравнивает currentText с oldValue, если они равны, тогда пользователь перестает писать, а затем посылает ajax на notyping.php
ваш обновленный код приведен ниже. Я создал функцию getTyping, которая будет вызывать каждый раз с интервалом в 1 секунду, если пользователь начнет печатать.
в get getTyping setinterval function я вызывал функцию check_which_function.
в функции check_which_funciton я использовал ваш код, применяя условия для длины значения textarea, которая находится в вложенном выражении if else, так что теперь
если пользователь начнет печатать, но если длина содержимого равна 0,
$ .trim (typingval) .length == 0 будет выполняться до тех пор, пока длина не будет равна 12
если длина содержимого больше 13, чем
$ .trim (typingval) .length> 13 выполнит
по умолчанию функция getTyping2 () выполняет в этой функции getTyping.php ajax call is going
<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>