为什么 Jquery 不使用 textarea？

我正在处理一个 Laravel 项目，我正在尝试使用 Jquery 进行实时预览（例如 iMessage 电话对话）。

我希望我的 textarea 值显示在对话中的 ap 标志（消息）中。

文本区

电话交谈

我使用了这个代码：

$('#modele_message').on('input', function(e) {
    $("#messagerendu").html($(this).val());
});

其中#modele_message是我的textarea，#messagrendu是我们可以在屏幕上看到的p 标志。

它不起作用，我不知道为什么...

我的刀片页面代码：

<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="card">
        <h5 class="card-header">Modifier le modèle <b>{{ $modele->title }}</b></h5>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                      @endforeach
                  </ul>
                </div><br />
            @endif
            <form method="post" action="{{ route('modeles.update', $modele->id) }}">
                    <div class="form-group">
                        @csrf
                        @method('PATCH')
                        <label for="title">Titre du modèle :</label>
                        <input type="text" class="form-control" name="title" value="{{$modele->title}}"/>
                    </div>
                    <div class="form-group">
                        <label for="message">Message du modèle :</label>
                        <textarea class="form-control" name="message" id="modele_message">{{$modele->message}}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="campagne_id">Campagne</label>
                        <select class="form-control" id="input-select" name="campagne_id" required>
                            @foreach ($campagnes as $campagne)
                                <option value="{{$campagne->id}}">{{$campagne->name}}</option>
                            @endforeach    
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Mettre à jour</button>
            </form>
        </div>
    </div>
</div>

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="card">
        <h5 class="card-header">Prévisualisation</b></h5>
        <div class="card-body">
                <div class="panel panel-default" style="margin: 0 auto">
                        <div class="panel-heading text-center">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="icon"><i class="fas fa-chevron-left"></i></div>
                                </div>
                                <div class="col-md-offset-3 col-md-2" style="margin: 0 auto">
                                    <div id="contact"><span class="fas fa-user" aria-hidden="true"></span></div>
                                    GRDF
                                </div>
                                <div class="col-md-offset-3 col-md-2">
                                    <div class="icon"><i class="fas fa-info-circle"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="date">
                                <span class="bold">Aujourd'hui</span> 12:00
                            </div>
                            <div class="invisible message">
                                <div class="message-in message-default">
                                    Test
                                </div>
                            </div>
                            <div class="invisible message">
                                <div class="message-in message-default">
                                    Test
                                </div>
                            </div>
                            <div class="invisible message text-right">
                                <div class="message-out message-default">
                                    Test
                                </div>
                            </div>
                            <div class="invisible message text-right">
                                <div class="message-out message-default">
                                </div>
                            </div>
                            <div class="message">
                                <div class="message-in message-default">
                                    <p id="messagerendu"></p>
                                </div>
                            </div>                          
                        </div>
                    </div>

                    <div class="modal" id="modal-photo">
                      <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">x</button>
                                <h4 class="modal-title">Envoyer une photo</h4>
                            </div>
                            <div class="modal-body">
                                <input type="file" name ="photo" id="photo" accept="image/*">
                            </div>
                            <div class="modal-footer">
                                <button id="validation" class="btn btn-primary">Envoyer</button>
                            </div>
                        </div>
                      </div>
                    </div>
        </div>
    </div>
</div>