javascript - 使用用户在 textarea 中的输入修改 HTML 中的 标记的 jQuery 脚本

Question

我想制作一个简单的 jQuery 脚本来执行以下操作:

1. 我有 <p> 的 HTML 代码标记和 <textarea>供用户输入。
2. 用户在 <textarea> 中输入文本-> jQuery 将其插入 <p> HTML 代码中的 (class="youtyped") 标记。

HTML 代码:

<p class="youtyped"></p>

<textarea>Please type your text here</textarea>

使用示例:用户在文本区域中输入“Hello”，HTML 代码将如下所示:

<p class="youtyped">Hello</p>

提前致谢:)

Answer 1

试试这个，

$('textarea').on('keyup',function(){
    $('p.youtyped').text(this.value);
});

$('textarea').on('keyup',function(){
    $('p.youtyped').text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="youtyped"></p>

<textarea>Please type your text here</textarea>

如果您想要 Enter 键上的值，请尝试，

$('textarea').on('keyup',function(e){
    if(e.keyCode==13)
       $('p.youtyped').text(this.value);
});

$('textarea').on('keyup',function(e){
    if(e.keyCode==13)
       $('p.youtyped').text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="youtyped"></p>

<textarea>Please type your text here</textarea>