javascript - 使用 jQuery 在 keyUp 上包装 中的单个字符

Question

我想将每个字符包装在 <span></span> 中并且期望输出是 <span>a</span><span>b</span><span>c</span> .

我试过跟随但没有帮助。

JSFIDDLE

<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的内容是什么:

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());
    });
});

#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..."></div>
<code id="out"></code>

替换 char 的纯函数如下所示:

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

这是另一个case-sensitive func keypress 与preventDefault() 一起使用以防止出现冗余字符:

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

#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..."></div>
<code id="out"></code>