我怎樣才能輸入一個文本框，並有任何我輸入同時出現在一個div？

我想要它，所以當我鍵入到一個文本框（或輸入字段），並有我同時打字的任何內容出現在一個div或頁面上的其他地方？我怎樣才能輸入一個文本框，並有任何我輸入同時出現在一個div？

當我們輸入一個問題時，stackoverflow站點會這樣做。當我們輸入一個問題時，它會顯示我們在文本框下面的框中輸入的任何內容。希望我的問題有道理！

在此先感謝。

2010-07-24 Amir R.

謝謝大家。從互聯網開始以來，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。

來源

2010-07-24 21:24:02 Anurag

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

來源

2010-07-24 21:23:37 NinjaCat

您可以使用.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>

來源

2010-07-24 21:25:19

我怎樣才能輸入一個文本框，並有任何我輸入同時出現在一個div？

回答

相關問題