Javascript 对每个字母的文本区域（输入）进行随机紧排

我对此一无所知，但在花了一周时间试图找到答案后，我想我会直接问。 我正在使用javascript和jquery构建一个文本编辑器。我有一个textarea（带有contenteditable）、一个样式表和一个js脚本。我想要的是，对于每个按下的字母，紧排将是随机的。我通过一个简单的函数实现了这一点，但我不希望所有textarea文本都有这种字距，只需按下最后一个字母，依此类推，这样的结果就是：

到目前为止，我的js文件中有以下内容：

$(document).ready(

function() {
$('#textarea').keypress(function(){     
var KerningRandom =  Math.floor((Math.random()*90)-20);
$(this).css('letter-spacing',KerningRandom);

}))

这是我的，实际上在JSFIDLE中不起作用，我不明白为什么，因为它在本地工作得很好

---

谢谢

您不能在CSS中处理单个字符（以及字形）。只是

您可以选择：

将所有字符转换为单个跨距。我觉得这太过分了

使用

呈现文本，从而从头开始实现文本流布局

---

你可以在那里找到一个你想要达到的目标（我用你的叉子）

完整代码：

    //Code from https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity


    //Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
    (function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));    



// ACTUAL CODE MADE FOR THIS ANSWER

    $('#textarea').keypress(function(event) {
    event.preventDefault();
      var KerningRandom = Math.floor((Math.random() * 90));
      if ($("#last").length > 0)
      {
      var previousLast = $("#textarea #last").html();
      $("#textarea #last").remove();
      }
      else
      var previousLast = "";
      $("#textarea").html($("#textarea").html().slice() + previousLast + "<span id='last'>" + String.fromCharCode(event.which) + "</span>")
      $("#last").css('margin-left', KerningRandom + "px");

var editableDiv = document.getElementById("textarea");
cursorManager.setEndOfContenteditable(editableDiv)
    });

var editableDiv = document.getElementById("textarea");
cursorManager.setEndOfContenteditable(editableDiv)

//源代码https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity
//名称空间管理思想http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
（函数（游标管理器）{
//发件人：http://www.w3.org/TR/html-markup/syntax.html#syntax-元素
var voidNodeTags=['AREA'，'BASE'，'BR'，'COL'，'EMBED'，'HR'，'IMG'，'INPUT'，'KEYGEN'，'LINK'，'MENUITEM'，'META'，'PARAM'，'SOURCE'，'TRACK'，'WBR'，'BASEFONT'，'BGSOUND'，'FRAME'，'ISINDEX']；
//发件人：https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
Array.prototype.contains=函数（obj）{
var i=该长度；
而(我--){
如果（此[i]==obj）{
返回true；
}
}
返回false；
}
//基本思想来自：https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
函数CanContaintText（节点）{
如果（node.nodeType==1）{//是元素节点
return！voidNodeTags.contains（node.nodeName）；
}else{//不是元素节点
返回false；
}
};
函数getLastChildElement（el）{
var lc=el.lastChild；
while（lc&&lc.nodeType！=1）{
if（lc.以前的兄弟姐妹）
lc=lc.以前的兄弟姐妹；
其他的
打破
}
返回信用证；
}
//根据Nico Burns的回答
cursorManager.setEndOfContenteditable=函数（contentEditableElement）
{
while（getLastChildElement（contentEditableElement）&&
CanContaintText（getLastChildElement（contentEditableElement）））{
contentEditableElement=getLastChildElement（contentEditableElement）；
}
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{    
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}
}（window.cursorManager=window.cursorManager | |{}）；
//这个答案的实际代码
$（'#textarea'）。按键（函数（事件）{
event.preventDefault（）；
var KerningRandom=Math.floor（（Math.random（）*90））；
如果（$（“#last”）.length>0）
{
var previousLast=$（“#textarea#last”）.html（）；
$（“#textarea#last”）.remove（）；
}
其他的
var previousLast=“”；
$（“#textarea”）.html（$（“#textarea”）.html（）.slice（）+previousLast+“”+String.fromCharCode（event.which）+“”）
$（“#last”）.css（'margin-left'，KerningRandom+“px”）；
var editableDiv=document.getElementById（“textarea”）；
cursorManager.setEndOfContenteditable（editableDiv）
});
var editableDiv=document.getElementById（“textarea”）；
cursorManager.setEndOfContenteditable（editableDiv）

逐点说明：

     $('#textarea').keypress(function(event) {
    event.preventDefault();
      var KerningRandom = Math.floor((Math.random() * 90));
      if ($("#last").length > 0)
      {
      var previousLast = $("#textarea #last").html();
      $("#textarea #last").remove();
      }
      else
      var previousLast = "";
      $("#textarea").html($("#textarea").html() + previousLast + "<span id='last'>" + String.fromCharCode(event.which) + "</span>")
      $("#last").css('margin-left', KerningRandom + "px");

      var editableDiv = document.getElementById("textarea");
      cursorManager.setEndOfContenteditable(editableDiv)
    });

$（'#textarea'）。按键（函数（事件）{
event.preventDefault（）；
var KerningRandom=Math.floor（（Math.random（）*90））；
如果（$（“#last”）.length>0）
{
var previousLast=$（“#textarea#last”）.html（）；
$（“#textarea#last”）.remove（）；
}
其他的
var previousLast=“”；
$（“#textarea”）.html（$（“#textarea”）.html（）+previousLast+“”+String.fromCharCode（event.which）+“”）
$（“#last”）.css（'margin-left'，KerningRandom+“px”）；
var editableDiv=document.getElementById（“textarea”）；
cursorManager.setEndOfContenteditable（editableDiv）
});

event.preventDefault（）

阻止按键时添加字母。 然后，我们计算左边距值，保存之前的最后一个字母，并删除包含最后一个字母的跨度，因为它不再是最后一个字母。 我们附上上一封信