basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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 <a href="https://jsfiddle.net/ ">https://jsfiddle.net/ </a>es auch implementiert hat. Hat jemand einen Lösungsvorschlag oder so etwas schonmal gemacht?

    Code

                                        
                                    
        <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js_webseite/jquery.js"></script>
      <style>
        body{
    	background: #eceaea;
        font-family: Helvetica, Arial, sans-serif;
    }
    textarea{
    	background: #fff;
    	border: none;
    	font-size: 1.4rem;
    	line-height: 1.5;
    	height: 80px;
    	outline: none;
    	overflow: hidden;
    	padding: 0;
    	resize: none;
    	width: 280px;
    	margin:0.9rem auto;
    	border-color: #848484 #c1c1c1 #e1e1e1;
    	color: #000;
    	white-space: pre-wrap;
    	word-wrap: break-word;
    	letter-spacing: normal;
    	word-spacing: normal;
    	text-transform: none;
    	text-indent: 0px;
    	text-shadow: none;
    	display: inline-block;
    	-webkit-rtl-ordering: logical;
    	-webkit-user-select: text;
    	flex-direction: column;
    	-webkit-writing-mode: horizontal-tb;
    
    }
      </style>
    </head>
    <body>
        <textarea style="width:300px; font-size:14px; padding:5px 10px;"></textarea>
    <div class="tracker"></div>
    
        <script>
    
    
    jQuery.fn.trackRows = function() {
        return this.each(function() {
    
            var ininitalHeight, currentRow, iteration = 0;
    
            var createMirror = function(textarea) {
                jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
                return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
            }
    
            var sendContentToMirror = function (textarea) {
                mirror.innerHTML = String(textarea.value.substring(0,textarea.selectionStart)).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br />') + '.<br/>.';
    
               calculateRowNumber();
           }
    
           var growTextarea = function () {
               sendContentToMirror(this);
           }
    
           var calculateRowNumber = function () {
               if(iteration===0){
                   ininitalHeight = $(mirror).height();
                   currentHeight = ininitalHeight;
                   iteration++;
               }
               else{
                   currentHeight = $(mirror).height();
               }
    
               currentRow = currentHeight/(ininitalHeight/2) - 1;
               
               //remove tracker in production
               $('.tracker').html('Current row: ' + currentRow);
          }
    
                    // Create a mirror
          var mirror = createMirror(this);
                    
                    // Style the mirror
                    mirror.style.display = 'none';
                    mirror.style.wordWrap = 'break-word';
                    mirror.style.whiteSpace = 'normal';
                    mirror.style.padding = jQuery(this).css('padding');
                    mirror.style.width = jQuery(this).css('width');
                    mirror.style.fontFamily = jQuery(this).css('font-family');
                    mirror.style.fontSize = jQuery(this).css('font-size');
                    mirror.style.lineHeight = jQuery(this).css('line-height');
    
                    // Style the textarea
                    this.style.overflow = "hidden";
                    this.style.minHeight = this.rows+"em";
    
                    var ininitalHeight = $(mirror).height();
    
                    // Bind the textarea's event
                    this.onkeyup = growTextarea;
    
                    // Fire the event for text already present
                    // sendContentToMirror(this);
    
            });
    };
    
    $(function(){
        $('textarea').trackRows();
    });
    
    
      </script>
    
    
    </body>
    </html>