Zeile des Cursors in Texarea farbig hinterlegen lösung 2
Hallo zusammen,
ich würde gerne in einem Textarea die Zeile, in welcher der Cursor aktuell ist farbig hinterlegen.
Ich dachte dabei an ein DIV, welches hinter dem Textarea ist und dann eben von hinten durchscheint.
Jedoch stelle ich es mir schwer vor, das DIV immer korrekt hinter der aktuellen Zeile zu positionieren, da ja in dem Textarea auch gescrollt werden kann. Eine fertige Lösung habe ich nirgends gefunden, jedoch stelle ich es mir in etwa so vor, wie https://jsfiddle.net/ es auch implementiert hat.
Hat jemand einen Lösungsvorschlag oder so etwas schonmal gemacht?
Der hier verwendete Code
<style>
.focusColor:focus {
background: #000000;
}
div{
width:100px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<div contenteditable="true">
<p tabindex="1" class="focusColor focused">line1</p>
<p tabindex="2" class="focusColor">line2</p>
<p tabindex="3" class="focusColor">line3</p>
</div>
<script>
$(document).keydown(function(e){
if (e.keyCode == 38) {
e.preventDefault();
e.stopImmediatePropagation();
if($('.focused').prev('.focusColor').length){
$('.focused').removeClass('focused').prev('.focusColor').focus().addClass('focused');
}
}
if (e.keyCode == 40) {
e.preventDefault();
e.stopImmediatePropagation();
if($('.focused').next('.focusColor').length){
$('.focused').removeClass('focused').next('.focusColor').focus().addClass('focused');
}
}
});
</script>