Nachricht zitieren mit javascript php
Hallo liebe User/in,
Ich wollte mal wissen ob, das möglich ist bei mir im Chat die Nachricht von einem User zu zitieren.
Das man auf einen Zitier Icon, neben der gewünschten Nachricht die zu zitieren ist klickt, und die Nachricht mit einem angepassten Design, in den Input zu schmeißen.
Der hier verwendete Code
<html>
<body>
<script src="/js_webseite/jquery.js"></script>
<style>
button{
width:22px;
height:22px;
border:1px solid red;
border-radius:50%;
}
#chat{
margin-top:50px;
}
.text::selection{
background:blue;
}
.messages{
border:1px solid black;
display:flex;
margin:10px 0;
padding:5px;
flex-direction:column;
}
.oben{
display:flex;
}
.chat_zitate:hover:after{
content:'kompletten Text makieren für Zitat';
display:block;
width:200px;
background:black;
color:white;
top:-50px;
position:relative;
}
.chat_zitate:hover{
cursor:pointer;
}
textarea,#senden{
width:60%;
margin-left:20%;
margin-top:20px;
}
</style>
<h1>Chat</h1>
<div id="chat">
<div class="messages">
<div class="oben">
<button class="chat_zitate">Z</button>
<div class="user" id="user-peter">Peter</div>
</div>
<div class="unten">
<div class="text">hallo Werner alles klar</div>
</div>
</div>
<div class="messages">
<div class="oben">
<button class="chat_zitate">Z</button>
<div class="user" id="user-werner">Werner</div>
</div>
<div class="unten">
<div class="text">Ja Peter alles bestens</div>
</div>
</div>
</div>
<textarea id="text_area"></textarea>
<input type="button" id="senden" value="senden">
<script>
function start(){
$('.messages .text').mousedown(function(e){
user=$(this).parent().parent().children().children().next().html();
dest1 = e.pageX;
p=0;
$('.messages .text').on('click',function(r){
var dest2 = r.pageX;
var jj=dest1-dest2;
if(jj<=3){
console.log('Zu wennig makiert');
}
if(jj>=4){
console.log('Fired= Minimum: '+dest1+'Ist: '+jj+' Maximum: '+dest2)
tool()
}else{
}
});
function tool(){
if (document.getSelection){
txt = document.getSelection();
toolaus(txt);
}else if (document.selection){
txt = document.selection.createRange().text;
toolaus(txt);
}else{}
function toolaus(txt){
p++;
if(p==1){
var vorhanden_inhalt=$('#text_area').val();
$('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');
}
//document.execCommand("copy");
}
}
});
$('.chat_zitate').click(function(){
user=$(this).next().html();
txt=$(this).parent().next().children().html();
$(this).parent().next().children().css('background','red')
var vorhanden_inhalt=$('#text_area').val();
$('#text_area').val(vorhanden_inhalt+' [ZITAT='+user+']'+txt+'[/ZITAT]');
});
}
start();
$('#senden').click(function(){
$('.text').css('background','none');
var inhalttextarea=$('#text_area').val();
$('#text_area').val('');
var chatin=$('#chat').html();
$('#chat').html(chatin+"<div class='messages'><div class= 'oben'> <button class='chat_zitate'>Z</button><div class='user' id='user-basti'>basti</div></div><div class='unten'><div class='text'>"+inhalttextarea+"</div></div></div>");
setTimeout(function(){
start();
},2500);
})
</script>
</body>
</html>