Question

我有一种＆＃34;翻译＆＃34;在我的网站上使用即时搜索功能的程序。我有一个textarea

<textarea name="text" onkeydown="searchq();"></textarea>

运行searchq（）函数

function searchq() {
    var searchTxt = $("textarea[name='text']").val();

    $.post("translate.php", {text: searchTxt}, function(output){
        $("#translated").html(output);
    });
}

将每个单词发送到translate.php

if(isset($_POST["text"])){
    $words = explode(' ',$_POST['text']);

    $i = 0;
    foreach($words as $word){
        // performs transformations on the words
        $output = $word . " ";
        echo($output);
        $i++;
    }
}

但是，如果您在我的网站http://saaa.me/MattSpeak.html上试用，，您可以清楚地看到，如果您输入＆＃34; y＆＃34;，则无法显示任何内容，并且仅在您输入时下一个字母或空格将是＆＃34; y＆＃34;出现。即时翻译过程似乎只落后一个角色。造成这种情况的原因是什么？（商标标志和＆＃34;呃＆＃34;单词结尾是我作为＆＃34;翻译＆＃34;的一部分添加的内容;）

我有点想知道为什么这不能正常工作但却不知道如何解决它。非常感谢帮助。

Answer 1

keydown事件在之前添加的字符（即使keypress事件在它之前）。如果您要回复所输入的信件，请回复input，或者对于较旧和/或错误的浏览器（基本上为IE9 and earlier），请回复keypress并提供简短的setTimeout }。

使用input：

＆＃13;

$("textarea").on("input", function() {
  $("<p>").text($(this).val()).appendTo(document.body);
});

＆＃13;

<textarea></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

将keypress与setTimeout一起使用，以便添加字符：

＆＃13;

$("textarea").on("keypress", function() {
  var $this = $(this);
  setTimeout(function() {
    $("<p>").text($this.val()).appendTo(document.body);
  }, 0);
});

＆＃13;

<textarea></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

我倾向于回应一系列事件并使用去抖动，所以我不会多次回应：

＆＃13;

var lastSearch = null;
$("textarea").on("input keyup change", function() {
  var search = $(this).val();
  if (search !== lastSearch) {
    lastSearch = search;
    $("<p>").text(search).appendTo(document.body);
  }
});

＆＃13;

<textarea></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

即时搜索功能是

1 个答案: