我怎样才能输入一个文本框，并有任何我输入同时出现在一个div？

问题描述：

我想要它，所以当我键入到一个文本框（或输入字段），并有我同时打字的任何内容出现在一个div或页面上的其他地方？我怎样才能输入一个文本框，并有任何我输入同时出现在一个div？

当我们输入一个问题时，stackoverflow站点会这样做。当我们输入一个问题时，它会显示我们在文本框下面的框中输入的任何内容。希望我的问题有道理！

在此先感谢。

谢谢大家。从互联网开始以来，Stackoverflow（特别是社区）和jQuery是最伟大的事情。再一次感谢你的帮助。也许有一天我可以回报你的青睐。 – 2010-07-24 22:26:59

答

的StackOverflow的网站确实有点多，因为它的语法高亮太多，但其基本思想是听键盘事件 -（更好），keypress或keyup（不太好，如果一个按钮被持续按下），并在其回调中使用源容器的值更新目标容器的值。这是一个简单的例子。

最好的解决方案是绑定到 - keyup和（或keypress）。原因是当触发key(press|down)回调时，文本框的值仍然是旧值，因此当我们更新目标容器时，它不会获取最后一个字符。另一方面，keyup在文本框的值更新后被触发。但是，如果按住按钮，keyup将不会触发，因为该按钮仅被释放一次，因此目标会在最后更新。解决办法是同时使用:)

$("textarea").bind('keyup keydown', function() { 
    $("#target").html(this.val()); 
});

查看example here。

keydown不会重复最后一个字符。 – 2010-07-24 21:31:05

好点@Gert。也许'keyup'更好，但持续按下按钮的问题仍然存在。需要一个更好的方法来解决这两个问题。 SO回答预览解决得很好:) – Anurag 2010-07-24 21:34:22

答

好问题......从来没有想过它，但功能很酷。

我去查看源代码：

有此页的功能：

<script type="text/javascript"> 
    $(function() { 
     editorReady(1, heartbeat.answers); 
    }); 
</script>

这个网址中包含的功能“editorReady”。 http://sstatic.net/js/question.js?v=b05e8725a843

答

您可以使用.keydown()功能来达到这样的效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('#foo').keydown(function() { 
      $('#result').text($(this).val()); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <input type="text" name="foo" id="foo" /> 
    <div id="result"></div> 
</body> 
</html>

我怎样才能输入一个文本框，并有任何我输入同时出现在一个div？

相关推荐