Question

我想将每个字符换行包裹在中，并且希望输出为abc。

我曾尝试过以下但没有帮助。

<div contenteditable="true" id="text1" type="text" placeholder="type something...">

$(function() {
  $("#text1").keyup(function(event) {
    $(this).wrapInner( "<span class='test'></span>" )
  });
});

输出以下内容;这不是我要求的。有什么帮助吗？

<span class="test">
<span class="test">
    <span class="test">
        <span class="test">ffdf</span>
        </span>
    </span>
</span>

Answer 1

这是我的解决方案。输入div下方有标记code，用于控制div的内容：

＆＃13;

txt = $("#text1").html();
$("#out").text(txt);
$(function() {
    $("#text1").keyup(function(event) {
        txt = txt + "<span class='test'>"+String.fromCharCode(event.which)+"</span>";
        $(this).html(txt);
        $("#out").text($(this).html());
    });
});

＆＃13;

#text1 {
  border: 1px solid #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>

＆＃13;

替换char的纯函数看起来像：

txt = $("#text1").html();
$(function() {
    $("#text1").keyup(function(event) {
        txt += "<span>" + String.fromCharCode(event.which) + "</span>";
        $(this).html(txt);
    });
});

这是另一个区分大小写 func keypress与preventDefault()一起使用以防止出现多余字符的问题：

＆＃13;

txt = $("#text1").html();
$(function() {
    $("#text1").keypress(function(event) {
       txt += "<span>" + String.fromCharCode(event.which) + "</span>";
       event.preventDefault();
       $(this).html(txt);
       $("#out").text(txt);
    });
});

＆＃13;

#text1 {
  border: 1px solid #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>

＆＃13;

Answer 2

这就是你需要的吗？

$(function(){
$("#text1").keyup(function(event) {
$('.test').each(function (index) {
    var characters = $(this).text().split("");
    
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
    $this.append("<span>" + el + "</span");
    });

});

});
});

#text1 {
    background: #ccc none repeat scroll 0 0;
    height: 24px;
    width: 127px;
}

<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>

<span class="test">ffdf</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

首先拆分你的字符串怎么样？

$(function() {
  $("#text1").keyup(function(event) {
    $(this).text().split('').wrapInner( "<span class='test'></span>" )
  });
});

Answer 4

您需要按.split("")

拆分内容

var myText = $("#text").html();

var myTextArr = myText.split("");
$("#text").empty();

myTextArr.forEach(function(val, idx){
$("#text").append("<span class='test'>" + val + "</span>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='text'>ABC</div>

Answer 5

可以尝试使用text()并substr()获取最近输入的最后一个字符并添加

$(document).ready(function() {
  $("#text1").keyup(function(event) {

    var txt = $(this).text();
    $(this).wrapInner("<span class='test'>" + txt.substr(txt.length, txt.length - 1) + "</span>");
  });
});

#text1 {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something...">

Answer 6

由于目标是键入/替换（同时！），我使用了这个：

＆＃13;

arr=[];
$(function() {
$("#text1").keyup(function(event) {

clean=$( this )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    }).text();
    
 
output="";
arr.push(clean.charAt(clean.length-1));

for(i=0;i<arr.length;i++) {
output+="<span class='test'>"+arr[i]+"</span>";
}
$(this).html(output);

//console.log(output);
  });
});

＆＃13;

#text1 {
  border: 1px solid #ccc;
  height:200px;
}
.test {
  background:pink;
  color:white;
  margin-left:3px;
  display:inline-block;
  width:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>

＆＃13;

所以，首先 - 只过滤div中的文本，并用所需的html包装它。

P.S。 span CSS仅供测试之用。

P.S。 2不确定空白区域（以及所需的功能） - 但也可以删除它们......

无跨度CSS测试：https://jsfiddle.net/aau75w9q/4/（如果我理解正确，则生成的HTML是必需的）

使用jQuery在keyUp上的<span>中包装单个字符

6 个答案: