在每个字母的文本区域（输入）中随机调整

Question

我对这一切都很陌生，但花了一周的时间试图找到答案后，我想我会试着直接询问。 我正在构建使用javascript和jquery的文本编辑器。我有一个textarea（带contenteditable），一个样式表和一个js脚本。我想要的是，对于每个字母按下，字距将是随机的。我实现了一个简单的功能，但我不希望所有的textarea文本有这样的字距，只有按下的最后一个字母等等等等，所以这种类型的东西会结果：

simulation

有什么我至今在我的js文件：

$(document).ready(

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

}）;

这是我的jsfiddle，实际上不工作在jsfiddle，我不明白为什么，因为它在当地工作正常......？

谢谢！

Answer 1

您不能在CSS中处理单个字符（以及字形）。只有::first-letter。

选项您有：

1. 转换所有字符个人跨度。我想这太多了。
2. 使用<canvas>来呈现文本，从而从头开始实现文本流布局。

Answer 2

你可以找到一个你想在那里达到什么样的工作（我分叉你的）。

https://jsfiddle.net/1gesLgsa/2/

全码：

//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) 

逐点解释：

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

的event.preventDefault()防止信按下一个键时添加。 然后，我们计算我们的左边距值，保存我们以前的最后一个字母，并删除包含最后一个字母的跨度，因为它不再是最后一个字母了。 我们附加了前一个最后一个字母，以及具有随机左边距（用于模拟字距）的跨度以及按下的键的值（感谢 How to find out what character key is pressed?）与实际内容。

之后，我们需要手动将文件头移动到textarea的末尾，否则它会停留在开头。

为此，我使用了 How to move cursor to end of contenteditable entity的代码，所以在此处解释。