代码之家 › 专栏 › 技术社区 › Amir Rustamzadeh

如何在文本框中键入内容,并使我键入的内容同时显示在一个DIV中?

html jquery javascript php

3

Amir Rustamzadeh · 技术社区 · 16 年前

当我输入一个文本框(或一个输入字段)并且同时输入的内容出现在一个DIV或页面上的其他位置时,我想这样做吗?

当我们键入问题时,stackoverflow站点会执行此操作。当我们键入问题时,它会在文本框下面的框中显示我们正在键入的内容。希望我的问题有意义!

事先谢谢。

3 回复 | 直到 16 年前

1

7

Anurag 16 年前

stackoverflow站点做得更多,因为它也做语法高亮显示,但是基本的思想是监听键盘事件。- keydown (更好) keypress 或 keyup (如果连续按下一个按钮就不太好了)并在其回调中用源容器的值更新目标容器的值。下面是一个简单的例子。

最好的解决方案是将两者结合起来- 弹起 和( 键盘按下 或 按键 )原因是当 key(press|down) 回调被激发,文本框的值仍然是旧值,因此当我们更新目标容器时,它不会得到最后一个字符。 弹起 另一方面,在更新文本框的值后激发。然而, 弹起 如果你按住一个按钮不会开火,因为这个按钮只释放一次,所以目标在最后更新。解决方案是同时使用两种方法:)

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

见一 example here .

2

Darin Dimitrov 16 年前

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

3

1

NinjaCat 16 年前

好问题…以前从来没想过,但是这个功能很酷。

我去查看来源:

此页附加了一个函数:

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

此处的URL包含函数“editorready”。 http://sstatic.net/js/question.js?v=b05e8725a843