jquery - 无需表单即可在同一页面中传递信息

Question

我可以有一个人们可以编写的 div 并在同一页面中使用相同文本的不可编辑的 div 吗？如何在不单击任何按钮的情况下做到这一点？

我可以使用 jQuery。

我在这里有一个例子：http: //jsfiddle.net/bJvQL/1/

CSS：

#input, #out { 
  width:400px; height:200px;
  padding:20px;
  border:1px solid;
  overflow:auto;
}

HTML：

<div id="input" contenteditable="true"> </div>
<div id="out"> </div>

Answer 1

这可以用 jQuery 来完成。

/** Don't forget to include jQuery, and open <script> tags */
jQuery(document).ready(function($){
    $('#input').keyup(function(){
         $('#out').html($(this).val());
    });
});

此外，您似乎将客户端脚本 (JavaScript) 与服务器端脚本 (PHP) 混淆了。

Answer 2

利用：

<style>
#input, #out { 
  width:400px; height:200px;
  padding:20px;
  border:1px solid;
  overflow:auto;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript"></script>

<script>
$(document).ready(function () {
    $('#input').on('keydown', function () {
        $('#out').html($('#input').html());
    });
});
</script>

<div id="input" contenteditable="true"> </div>
<div id="out"> </div>

Answer 3

您可以尝试使用 jquery：

$(document).ready(function () {
    $('#in').on('keydown', function () {
        $('#out').html($('#in').html());
    });
});