Question

我正在做一个laravel项目，并且正在尝试使用Jquery进行实时预览（例如iMessage电话交谈）。

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

textarea

电话交谈

我使用了以下代码：

$('#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>

Answer 1

根据您的情况，您不能使用oninput事件，请尝试使用keypress事件

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

为什么Jquery无法使用textarea？

1 个答案: