在每個字母的文本區域（輸入）中隨機調整

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的代碼，所以在此處解釋。