Javascript 为什么Jquery是'；你不在文本区工作吗？

我正在从事一个laravel项目，我正在尝试使用Jquery进行实时预览（类似iMessage电话对话）

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

文本区

电话交谈

我使用了以下代码：

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

其中#modele_message是我的文本区域，而#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>

修饰语lemodèle{{$modele->title}
@如果（$errors->any（））

@foreach（$errors->all（）作为$error）
{{$error}}
@endforeach



@恩迪夫
@csrf
@方法（'补丁'）
莫代尔土产：
现代信息：
{{$modele->message}
坎帕涅
@foreach（$campagnes as$campagne）
{{$campagne->name}
@endforeach
梅特雷日
视觉化
GRDF
欧日辉12:00
试验
试验
试验

x
英国驻华使节照片
特使

---

在您无法使用oninput事件的情况下，请尝试使用on keypress事件

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

---

你的HTML中没有文本区域。我的复制粘贴失败，现在很好