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>