Kurze Scripte und Codeschnipsel ,link auswahl einblenden beim schreiben im textfeld

link-auswahl-einblenden-beim-schreiben-im-textfeld.php

Quell Code

<!Doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <title> jQuery </title>
        <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
body{
  text-align:center;
 
}

textarea{
  width:300px;
  height:200px;
  font-size:25px; 
}

::placeholder{
  text-align:center;
  color:red;
}


 
#linkswahlen{
  height:35px;
  width:300px;
  font-size:25px;
}

#links{
 margin-top:10px;
    height:35px;
  width:300px;
  border:5px solid black;
  margin-left:calc(50% - 150px);
  display:none;
}
      </style>

<body>
<h2>Gebe LINK ein um eine Auswahl von Links zu bekommen die mit einen klick im Textarea landen.</h2>
<h3>Die Dropauswahl kann auch von einer Datenbank bezogen werden </h3>
<textarea id="test" placeholder="Gebe LINK ein um eine auswahl zu bekommen"></textarea>
<div id="links">
  
 <select id="linkswahlen"> 
<option>- Auswahl - </option>
   <option value="http://google.de">Google</option>
   <option value="http://sebastian1012.bplaced.net">Homepage in bau</option>
   <option value="https://www.html-seminar.de/forum/">html-seminar</option>
    <option value="http://html.de">html.de</option>
    <option value="https://www.tutorials.de">Tutorials.de</option>
  </select>
</div>
 
<script>
$('#test').on('keyup',(function(){
    ff=$('#test').val();
    wort=ff.indexOf('LINK');
    if(wort!=-1){
        linkwahl();
    }
}))

function linkwahl(){
    $('#links').css('display','block');
    $('#linkswahlen').change(function(){
        auswahl=$('#linkswahlen').val();     
        $('#links').css('display','none'); 
        var ff=$('#test').val();
        var fertig=ff.replace('LINK',auswahl);
        $('#test').val(fertig);
  })
}
  </script>
  
  <script>
  // Hier ist der gleiche Code nochmal ,nur ohne Jquery
  /*
  
ele=document.getElementById('text');
ele.addEventListener('keyup',function() {
    var string = ele.value;
    wort=string.indexOf('@');
    if(wort!=-1){
         linkwahl(ele)
    } 
});

function linkwahl(ele){
    elem=document.getElementById('linkswahlen');
    elem.style.display='block';
    elem.onchange=function(){
         auswahl=elem.value;     
         elem.style.display='none';
         var ff=ele.value;
         var fertig=ff.replace('@',auswahl);
         ele.value=fertig;
    }
}
  */
</script>
  
 
  
   </body></html>