如何在聊天中回复特定消息，就像使用 html css javascript/jquery 的 skype/whatsapp

Posted 2023-05-08

【中文标题】如何在聊天中回复特定消息，就像使用 html css javascript/jquery 的 skype/whatsapp

【英文标题】：how to reply to a specific message in chat just like skype/ whatsapp using html css javascript/jquery

【发布时间】：2022-01-12 21:05:13

【问题描述】：

我正在尝试为移动和桌面网站制作聊天框。我对如何像Skype和whatsapp一样制作特定的消息回复功能感到震惊。用户单击回复按钮，然后在类型框中显示一个弹出窗口，反映他/她选择作为回复的消息。

示例 -> https://imgur.com/a/tbKfuFe

这里是html的示例代码

enter code here<div class="chat-box">
    <div class="chat-log">
      <div class="chat friend">
        <div class="user-1">
          <img
            class="user-1-photo"
            src="https://static.wikia.nocookie.net/onepiece/images/4/4f/Portgas_D._Ace_Anime_Infobox.png"
            
          />
        </div>
        <div class="user-1-message">
          <div class="chat__message__log">
            <span class="user-info"
              >Portgas <span class="user-info-2">D. Ace</span></span
            >
            <span class="message__date user-info-2">1/12/2021</span>
          </div>
          <p class="chat-message">Hello</p>
          <span class="material-icons-outlined reply-icon"> reply </span>
        </div>
      </div>
      <div class="chat self">
        <div class="user-1">
          <img
            class="user-1-photo"
            src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png"
            
          />
        </div>
        <div class="user-1-message">
          <div class="chat__message__log">
            <span class="user-info"
              >Monkey<span class="user-info-2"> D.Luffy</span></span
            >
            <span class="message__date user-info-2">1/12/2021</span>
          </div>
          <p class="chat-message-2">hiii</p>
          <span class="material-icons-outlined reply-icon"> reply </span>
        </div>
      </div>
    </div>
    <div class="chat-form">
      <textarea></textarea>
      <button>send</button>
    </div>
  </div>

这里是css的样式

.chat-box 
  width: 676px;
  height: 440px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  margin: 15px 20px 0 20px;
  position: relative;


.chat-log 
  height: 365px;
  overflow-x: hidden;
  overflow-y: scroll;


.chat 
  display: flex;
  margin: 15px 45px;
  justify-content: flex-start;
  flex-flow: row wrap;
  cursor: pointer;


.chat.friend 
  flex-flow: row wrap;


.chat.self 
  flex-flow: row-reverse wrap;


.user-1-photo 
  width: 30px;


.user-1-message 
  display: flex;
  flex-direction: column;
  margin: 0 10px;


.chat__message__log 
  line-height: 12px;
  margin-bottom: 5px;
  padding: 0 15px;


.user-info 
  font-size: 12px;
  letter-spacing: 0px;
  color: #444444;
  font-weight: 600;


.user-info-2 
  font-size: 12px;
  color: #676767;
  font-weight: 500;


.chat-message 
  font-size: 14px;
  color: #2b2c2d;
  border-radius: 8px;
  background-color: #f5fbff;
  padding: 10px 15px;

.chat-message-2 
  font-size: 14px;
  color: #2b2c2d;
  border-radius: 8px;
  background-color: #f1f1f1;
  padding: 10px 15px;


.reply-icon 
  font-size: 12px;
  color: #2b2c2d;


.chat-form 
  width: 636px;
  height: 50px;
  margin: 0 20px;
  background-color: #f5fbff;
  border-radius: 6px;
  border: solid 1px white;
  display: flex;
  align-items: center;


.chat-form textarea 
  font-size: 16px;
  width: 90%;
  height: 25px;
  background: transparent;
  border: none;
  resize: none;
  overflow-y: hidden;


.chat-form textarea:focus 
  outline: none;

至于 javascript/jquery 我不知道从哪里开始。

小提琴：https://jsfiddle.net/Anurag2210/m0bod8th/23/

【参考方案1】：

工作演示： https://jsfiddle.net/vxs5qk47/9/

$("#btnSendMsg").on("click", function (e) 
    if ($("#txtMsg").val().trim().length) 
        var msg = $("#txtMsg").val();
        var template =
            '<div class="chat self">' +
            '    <div class="user-1">' +
            '        <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png" >' +
            '    </div>' +
            '    <div class="user-1-message">' +
            '        <div class="chat__message__log">' +
            '            <span class="user-info">Monkey<span class="user-info-2"> D.Luffy</span></span>' +
            '            <span class="message__date user-info-2">1/12/2021</span>' +
            '        </div>' +
            '        <p class="chat-message-2">' + msg + '</p>' +
            '        <span class="material-icons-outlined reply-icon"> reply </span>' +
            '    </div>' +
            '</div>';
    

    $(".chat-log").append(template);
    $("#txtMsg").val("");
    $("#txtMsg").focus();
);

.chat-box 
    width: 676px;
    height: 440px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    margin: 15px 20px 0 20px;
    position: relative;


.chat-log 
    height: 365px;
    overflow-x: hidden;
    overflow-y: scroll;


.chat 
    display: flex;
    margin: 15px 45px;
    justify-content: flex-start;
    flex-flow: row wrap;
    cursor: pointer;


.chat.friend 
    flex-flow: row wrap;


.chat.self 
    flex-flow: row-reverse wrap;


.user-1-photo 
    width: 30px;


.user-1-message 
    display: flex;
    flex-direction: column;
    margin: 0 10px;


.chat__message__log 
    line-height: 12px;
    margin-bottom: 5px;
    padding: 0 15px;


.user-info 
    font-size: 12px;
    letter-spacing: 0px;
    color: #444444;
    font-weight: 600;


.user-info-2 
    font-size: 12px;
    color: #676767;
    font-weight: 500;


.chat-message 
    font-size: 14px;
    color: #2b2c2d;
    border-radius: 8px;
    background-color: #f5fbff;
    padding: 10px 15px;

.chat-message-2 
    font-size: 14px;
    color: #2b2c2d;
    border-radius: 8px;
    background-color: #f1f1f1;
    padding: 10px 15px;


.reply-icon 
    font-size: 10px;
    color: #2b2c2d;


.chat-form 
    width: 636px;
    height: 50px;
    margin: 0 20px;
    background-color: #f5fbff;
    border-radius: 6px;
    border: solid 1px white;
    display: flex;
    align-items: center;


.chat-form textarea 
    font-size: 16px;
    width: 90%;
    height: 25px;
    background: transparent;
    border: none;
    resize: none;
    overflow-y: hidden;


.chat-form textarea:focus 
    outline: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-box-container">
    <div class="chat-box">
        <div class="chat-log">
            <div class="chat friend">
                <div class="user-1">
                    <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/4/4f/Portgas_D._Ace_Anime_Infobox.png"  />
                </div>
                <div class="user-1-message">
                    <div class="chat__message__log">
                        <span class="user-info">Portgas <span class="user-info-2">D. Ace</span></span>
                        <span class="message__date user-info-2">1/12/2021</span>
                    </div>
                    <p class="chat-message">Hello</p>
                    <span class="material-icons-outlined reply-icon"> reply </span>
                </div>
            </div>
            <div class="chat self">
                <div class="user-1">
                    <img class="user-1-photo" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png"  />
                </div>
                <div class="user-1-message">
                    <div class="chat__message__log">
                        <span class="user-info">Monkey<span class="user-info-2"> D.Luffy</span></span>
                        <span class="message__date user-info-2">1/12/2021</span>
                    </div>
                    <p class="chat-message-2">hiii</p>
                    <span class="material-icons-outlined reply-icon"> reply </span>
                </div>
            </div>
        </div>
        <div class="chat-form">
            <textarea id="txtMsg"></textarea>
            <button id="btnSendMsg">send</button>
        </div>
    </div>
</div>

【讨论】：

感谢 Nikhil 回复了聊天框的工作代码，但我在问我们如何才能像此屏幕截图 (imgur.com/a/tbKfuFe) 一样为特定评论附加回复框。