HTML in Div mit einem Substr einfügen

Question

Ich versuche, eine Unterstreichung oder ein Leerzeichen in einem Div einzufügen, das mit einer Schlüsselfunktion betroffen ist. Das Ziel ist, dass man sich dorthin bewegen kann, wo sich der Leerraum im Text befindet. Die keyup Funktion funktioniert einwandfrei, das Einfügen des Leerzeichen (div class unterstrichen) ist nicht möglich.

HTML:

<div class="bigwhitecard" id="bigwhitecard"></div> 

<textarea id="text" placeholder="Type your card here" name="text"></textarea> 

Javascript/Jquery:

$(document).ready(function() { 
$('#text').keyup(function(){ 
    $('#bigwhitecard').html($(this).val()); 
}); 

var blankplace = 0; 

$('#rightbtn').click(function() { 
blankplace++; 
}); 

$('#leftbtn').click(function() { 
blankplace--; 
}); 

var b = '<div class="underline"></div>'; 

$('#bigwhitecard').each(function() { 
var blankplace = 0; 

var txt = $(this).text(); 
if (txt.length>0) { 
    $(this).html(''+txt.substring(0,blankplace)+'<div class="underline">  </div>'); 
} 
}); 

}); 

Answer 1

So ein substr verwenden, um die verbleibenden Textlänge zu erhalten, die übrig geblieben ist, und fügen Sie nach dem Text.

var filler = "__________"; 
 
var out = document.getElementById("bigwhitecard"); 
 
document.getElementById("text").addEventListener("keyup", function() { 
 
    var txt = this.value, 
 
     placeholder = txt.length<filler.length ? '<span class="underline">' + filler.substr(0,filler.length-txt.length) + '</span>' : ''; 
 
    out.innerHTML = txt + placeholder; 
 
});

.underline { 
 
    text-decoration: underline 
 
}

<div class="bigwhitecard" id="bigwhitecard"></div> 
 
<textarea id="text" placeholder="Type your card here" name="text"></textarea>

Und basierend auf Ihren Kommentar

var out = document.getElementById("bigwhitecard"); 
 
document.getElementById("text").addEventListener("keyup", function() { 
 
    var txt = this.value, 
 
     ind = 6, 
 
     len = this.value.length, 
 
     pre = len > ind ? txt.substr(0,ind) : txt, 
 
     suf = len > ind ? txt.substr(ind) : ""; 
 
    out.innerHTML = pre + "<span>_</sapn>" + suf; 
 
});

.underline { 
 
    text-decoration: underline 
 
}

<div class="bigwhitecard" id="bigwhitecard"></div> 
 
<textarea id="text" placeholder="Type your card here" name="text"></textarea>