在HTML中用substr插入HTML

Question

我正在尝试在受keyup函数影响的div中插入下划线或空格。 目的是能够移动文本中空格的位置。 keyup函数工作正常，没有插入空格（div类下划线）。

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

因此，使用substr可以获取剩余的剩余文本长度，并将其添加到文本后面。

 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> 

并根据您的评论

 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>