[英]Insert HTML in Div with a substr
我正在嘗試在受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>');
}
});
});
因此,使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.