如何使用简单的 javascript 将用户输入显示为聊天气泡？

Question

我正在开发一个聊天框，并且我暂时将聊天消息硬编码。

                    <!-- Reciever Message-->
                <div class="media w-50 ml-auto mb-3">
                    <div class="media-body">
                        <div class="bg-primary rounded py-2 px-3 mb-2">
                            <p class="text-small mb-0 text-white">Test chat</p>
                        </div>
                    </div>
                </div>

我有一个带有简单输入框的表单。

     <form action="#" class="bg-light">
                <div class="input-group">
                    <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4" id="message">
                    <div class="input-group-append">
                        <button id="button-addon2" type="submit" class="btn btn-link" onclick="addText()"> <i class="fa fa-paper-plane"></i></button>
                    </div>
                </div>
            </form>

我想要的是一种在提交表单时将在文本框中输入的文本显示为接收消息 div 的方法。关于如何做的任何建议。提前致谢。

Answer 1

这确实是一个设计问题，而不是技术问题。从技术上讲，您只需做您正在做的事情......然后将“聊天气泡图”作为.bg-light 的background-image 样式。