JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div>الكلمات العربية لا يتغير لونها بدون ان يتم تكسيرها</div>
<input type="hidden" id="hidden">

CSS

div{
    border: 1px solid black;
    width: 400px;
    height: 20px;
    padding: 2px 3px;
    overflow: hidden;
}

JavaScript

$("div").prop("contentEditable", true).blur(function(){
    var chars = $(this).text().split("");
    $("#hidden").val($(this).text());
    this.innerHTML = "";
    $.each(chars, function(){
        $("<span>").text(this).css({
            color: "#"+(Math.random()*16777215|0).toString(16)
        }).appendTo("div");
    });
});